backbone.js – 在Safari中不触发的骨干事件

2023年1月4日 253次阅读

为了学习练习,我将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系统中的这个特定应用程序加载了以下文件.

最佳答案
This is jQuery + Safari issue (document.ready)

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

我还添加了requirejs支持并制作了pull request

编辑：

首先抱歉我的英文:)

文件视图/ index.haml：

我们应该在页面底部嵌入js(以避免Safari错误)

= javascript_include_tag“javascript / require.js”,：“data-main”=> “的JavaScript /配置”

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

文件public / javascript / config.js：

“deps”：[“hangman”]

这意味着应用程序将以hangman.js开头

文件public / javascript / hangman.js：

我们不需要$(function(){wrapper,因为我们从正文和文档初始化的脚本已经’准备好了’

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

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

其他文件

我们只需将$(function(){替换为define([‘backbone’],函数(Backbone){

在第一行我们加载骨干模块.当它被取出时,它将在匿名函数内可用(第一个参数 – Backbone)

接下来我们应该返回视图以避免未定义的模块值(public / javascript / hangman.js文件应该初始化很多视图.它无法初始化undefined它应该初始化Backbone.View我们应该返回)

要了解更多信息,您应该阅读requirejs文档.
我建议你从this article开始

点赞