4

作为学习练习，我将一个 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

我用谷歌搜索了一下，发现一些提到 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 系统中的这个特定应用程序加载了以下文件。

在此处输入图像描述

4

2 回答 2

2

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

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

我还添加了requirejs支持并提出了拉取请求

编辑：

首先对不起我的英语:)

文件视图/index.haml：

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

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

这javascript/config是 requirejs 配置的路径。

文件公共/javascript/config.js：

"deps" : ["hangman"]

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

文件公共/javascript/hangman.js：

我们不需要$(function() {包装器，因为我们从正文和文档初始化的脚本已经“准备好”

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

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

其它文件

我们只是替换$(function() {为define(['backbone'], function(Backbone) {

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

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

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

于 2013-01-21T12:16:21.930 回答
0

试试这个。

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 来管理所有这些全局对象问题。

于 2013-01-19T00:58:15.980 回答