对于学习练习，我将一个sinatra / backbone应用程序转换为Rails环境。 我使用了Chrome和Firefox，但在Safari上无法使用。 事实证明，原来的应用程序http://backbone-hangman.heroku.com也不适用于Safari。 当你点击“新游戏”时，它似乎不会触发一个事件。 Safari控制台不显示任何错误（尽管我没有使用Safari开发人员工具的经验，因为我从不使用它们）。

由于这里有可用的应用程序的实时版本http://backbone-hangman.heroku.com我不会发布很多代码，但这是查看代码，点击#new_game设置事件，触发startNewGame功能。 Safari中没有任何反应。 原文的源代码在这里https://github.com/trivektor/Backbone-Hangman

我google了一下，发现一些提及Safari处理事件的方式不同，但找不到解决方案。 任何可以推荐的东西？

$(function() {

  window.OptionsView = Backbone.View.extend({
    el: $("#options"),
    initialize: function() {
      this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
      this.model.bind("guessCheckedEvent", this.showGetAnswerButton, this);
    },
    events: {
      'click #new_game': 'startNewGame',
      'click #show_answer': 'showAnswer'
    },
    startNewGame: function() {
      this.model.new();
    },
    removeGetAnswerButton: function() {
      $("#show_answer").remove();
    },
    showGetAnswerButton: function(response) {
      console.log("showGetAnswerButton");
      console.log(response);
      var threshold = this.model.get("threshold");
      console.log(threshold);
      if (response.incorrect_guesses == this.model.get("threshold")) {
        $(this.el).append('<input type="button" id="show_answer" class="action_button" value="Show answer" />');
      }
    },
    showAnswer: function() {
      this.model.get_answer();
    }
  })

})

更新

根据OP下面的评论之一，我发布了更多代码。 这是实例化对象的hangman.js

var game = new Game

  var options_view = new OptionsView({model: game});

  var characters_view = new CharactersView({model: game});

  var hint_view = new HintView({model: game});

  var word_view = new WordView({model: game});

  var hangman_view = new HangmanView({model: game});

  var answer_view = new AnswerView({model: game});
  var stage_view = new StageView({model: game});

视图和模型就像这样附加到窗口

window.AnswerView = Backbone.View.extend({ ...

更新除了在站点范围内加载的Backbone，jQuery和Underscore之外，还会为Rails系统中的此特定应用程序加载以下文件。

---

这是jQuery + Safari问题（document.ready）

您可以将脚本移动到body标签中，并在每个文件中删除$(function(){ /**/ })包装器。

此外，我添加了requirejs支持并提出了请求

编辑：

首先感谢我的英语:)

---

文件视图/ index.haml：

我们应该将js嵌入页面的底部（以避免Safari错误）

= javascript_include_tag "javascript/require.js", :"data-main" => "javascript/config"

这里javascript/config是requirejs config的路径。

---

File public / javascript / config.js：

"deps" : ["hangman"]

这意味着应用程序将从hangman.js开始

---

File public / javascript / hangman.js：

我们不需要$(function() { wrapper，因为我们的脚本已经从主体初始化并且文档已经'准备好了'

define([
  'models/game',
  'views/answerView',
  /* ... */
],
function(Game, OptionsView, /* ... */) {
  // ...
}

这里我们加载我们的模块（第一个数组元素将在第一个函数参数中可用，依此类推）

---

其他文件

我们只需将$(function() { with define(['backbone'], function(Backbone) {

在第一行我们加载主干模块。 当它被提取时，它将在匿名函数中可用（第一个参数 - 骨干）

接下来，我们应该返回视图以避免undefined模块值（ public/javascript/hangman.js文件应该初始化很多视图，它不能初始化undefined它应该初始化我们应该返回的Backbone.View ）

---

要了解更多，你应该阅读requirejs文档。 我建议你从这篇文章开始

---

试试这个。

var OptionsView = Backbone.View.extend({
    el: $("#options"),
    initialize: function() {
      this.model.bind("gameStartedEvent", this.removeGetAnswerButton, this);
      this.model.bind("guessCheckedEvent", this.showGetAnswerButton, this);
    },
    events: {
      'click #new_game': 'startNewGame',
      'click #show_answer': 'showAnswer'
    },
    startNewGame: function() {
      this.model.new();
    },
    removeGetAnswerButton: function() {
      $("#show_answer").remove();
    },
    showGetAnswerButton: function(response) {
      console.log("showGetAnswerButton");
      console.log(response);
      var threshold = this.model.get("threshold");
      console.log(threshold);
      if (response.incorrect_guesses == this.model.get("threshold")) {
        $(this.el).append('<input type="button" id="show_answer" class="action_button" value="Show answer" />');
      }
    },
    showAnswer: function() {
      this.model.get_answer();
    }
  });

你的代码不需要在文档中准备好（它不是直接操作DOM，它只是声明一个对象）。

确保game.js在你所有的声明之后。

它看起来像Safari向全局对象添加变量时遇到的问题。 在全局上下文中使用var确保window.OptionsView存在。 您可能会考虑在将来使用require.js来管理所有这些全局对象问题。

链接地址: http://www.djcxy.com/p/65529.html

上一篇: backbone events not triggering in Safari

下一篇: relational not setting parent model, or reverse relation