Backbone.js Safari中未触发主干事件

为了进行学习练习，我将sinatra/backbone应用程序转换为Rails环境。我让它在Chrome和Firefox上工作，但在Safari上不工作。原来原来的应用程序在Safari上也不起作用。当你点击“新游戏”时，它似乎不会触发事件。Safari控制台没有显示任何错误（尽管我对Safari的开发人员工具没有太多经验，因为我从未使用过它们）

由于这里有一个应用程序的实时版本，我不会发布很多代码，但这是一个视图代码，用于在点击“新建”游戏时设置事件，触发StartNewName功能。在狩猎中什么也没发生。原始的源代码在这里

我在谷歌上搜索了一下，发现有人提到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();
    }
  })

})

视图和模型如下所示附着到窗口

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

更新 除了在站点范围内加载的主干、jQuery和下划线之外，还为Rails系统中的这个特定应用加载了以下文件

试试这个

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();
    }
  });

var OptionsView=Backbone.View.extend({
el:$（“期权”），
初始化：函数（）{
this.model.bind（“gameStartedEvent”，this.removeGetAnswerButton，this）；
this.model.bind（“guessCheckedEvent”，this.showGetAnswerButton，this）；
},
活动：{
'点击#新游戏'：'开始新游戏'，
“单击#显示答案”：“显示答案”
},
startNewName:函数（）{
this.model.new（）；
},
removeGetAnswerButton:函数（）{
$（“显示答案”）.remove（）；
},
showGetAnswerButton:功能（响应）{
console.log（“showGetAnswerButton”）；
控制台日志（响应）；
var threshold=this.model.get（“threshold”）；
console.log（阈值）；
if（response.error_guesses==this.model.get（“阈值”））{
$（this.el）。追加（“”）；
}
},
showAnswer:function（）{
这个.model.get_answer（）；
}
});

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

但是要确保game.js在你所有的声明之后运行

看起来Safari在向全局对象添加变量时遇到了问题。在全局上下文中使用var可确保window.options视图存在。您可能需要考虑将来使用Real.js来管理所有这些全局对象问题。

您只需将脚本移动到body标记中，然后删除每个文件中的

$（function（）{/**/}）

包装器

此外，我还添加了requirejs支持和

编辑： 首先，对不起我的英语：）

---

文件视图/index.haml： 我们应该在页面底部嵌入js（以避免Safari错误）

=javascript\u包括标签“javascript/require.js”，“data main”=>“javascript/config”

这里

javascript/config

是到requirejs config的路径

---

public/javascript/config.js文件：

“deps”：[“刽子手”]

这意味着应用程序将以

hangman.js

---

public/javascript/hangman.js文件： 我们不需要

$（function（）{

包装器，因为从正文和文档初始化的脚本已经“就绪”

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

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

---

其他文件 我们只是将

$（function（）{

替换为

define（['backbone'），function（backbone）{

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

接下来，我们应该返回视图以避免

未定义

模块值（

public/javascript/hangman.js

文件应该初始化很多视图。它不能初始化

未定义

它应该初始化

主干。我们应该返回的视图

）

---

要了解更多信息，您应该阅读requirejs文档。

---

我建议您从

开始，这个问题对我来说似乎很奇怪：主干网只是使用jQuery（或Zepto，如果您从事这类工作的话）进行事件连接，而jQuery以为您处理浏览器问题而闻名。我并不是说您是骗子或其他什么；-）只是说，这个问题很奇怪。好吧，你可以自己在演示应用程序中检查代码。它在Safari中对你有用吗？页面加载上有选项吗？可能是文档准备时间的问题。你忘了新建对象了吗？新建窗口。选项视图（）？也可能是您直接将其附加到窗口，我不会这样做，而是让全局窗口成为任何东西。不确定Safari在页面加载之前如何管理全局窗口。@amchang87根据我对您的评论的理解，我用更多代码更新了OP。但是，由于我没有那么丰富的经验，我不确定可能需要进行哪些更改你是否介意写一个答案，说明我如何修改代码，这样我就不会“直接将其附加到窗口”？如果这确实是我正在做的…感谢将“窗口”改为“变量”并没有解决问题（我在所有视图和模型上都这样做了。我用此应用程序加载的所有文件的快照更新了OP。您能否在回答中添加几行内容，解释我如何使用require.js来修复此问题。您需要删除$（）包装器…还有一点就是粘贴我粘贴到你的文件中的全部代码。你能解释一下为什么Game.js必须在所有声明之后执行吗？如果可以的话，谢谢。那不是我的github帐户，所以我不能接受拉取请求，但我会尝试在我的代码中复制它。我以前看过require.js文档，对设置它感到困惑。Can请用通俗易懂的语言简要解释一下您在每个文件中做了什么（如果您有时间的话），这样我就可以在其他项目中复制这些内容。@Michael没问题，请看上面谢谢，我下载了您的代码并在Safari中试过了。我

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