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の下のコメントの1つに基づいて、私はより多くのコードを投稿しています。これは、オブジェクトがインスタンス化される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サポートを追加し、プルリクエストを作成しました

編集：

まず第一に私の英語でごめんなさい:)

ファイルviews/index.haml：

ページの下部にjsを埋め込む必要があります（Safariエラーを回避するため）

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

これがrequirejsconfigjavascript/configへのパスです。

ファイルpublic/javascript / config.js：

"deps" : ["hangman"]

これは、アプリケーションがで始まることを意味しますhangman.js

ファイルpublic/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 に答える