0

ボタンをクリックしたり、イベントをトリガーしたりしても、イベントがトリガーされないのはなぜですか? 何が恋しいですか？

<html>
<head><script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="underscore.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script type="text/javascript">

var SearchView = Backbone.View.extend({

    events: {
        "click #testid": 'savenow'
    },

    initialize: function(){
        console.log("init");
        console.log($('testid'));
    },

    savenow: function(){
        console.log("test save method");
    }
});

// The initialize function is always called when instantiating a Backbone View.
// Consider it the constructor of the class.
var search_view = new SearchView({ el: $('#testid') });
search_view.trigger("savenow", "test");
</script></head>
<body>
<h1>test</h1>
<input id="testid" type="button" value="testbutton" />
</body></html>

上記の例はほとんどコピーされていますが、私の場合は機能していません。

4

3 に答える 3

2

あなたにはいくつかの問題があります。他の回答が示唆するように、eventsオブジェクトを変更する必要があります。#testidこれはビューの であるため、デフォルトでクリックイベントをバインドしますel。件名delegateEventsに関するいくつかの読み物。

events: {
  'click' : 'savenow'
}

2番目の問題は、ロードされる前にコードがロードされていることDOMです。つまり、ビューはtestid要素にバインドできません。これを修正するには、コードをdocument.read()関数でラップする必要があります。

<script type="text/template">
  $(function() {
      /* All your code
       ...
       ...
       */
  });

3 番目の問題はsearch_view.trigger("savenow", "test");、savenowイベントがトリガーされたときに呼び出されたときですが、そのイベントをリッスンしているものがないため、何も起こらないように見えます。ビューでそのイベントをリッスンする必要があります。

initialize: function(){
  console.log("init");
  this.on('savenow',this.savenow,this); 
   // or this.listenTo(this,'savenow',this.savenow);
}

実際のコード例:

<html>
  <head>
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="underscore.js" type="text/javascript"></script>
    <script src="backbone.js" type="text/javascript"></script>
    <script type="text/javascript">

      // Run this block of code when the DOM is loaded.
      $(function() {

        var SearchView = Backbone.View.extend({

          // Listen for click events on this view's element - '#testid'.
          events: {
            "click": 'savenow'
          },

          initialize: function(){
            console.log("init");
            // listen for the savenow event triggered by this view.
            this.listenTo(this,'savenow',this.savenow);
          },
          savenow: function(){
            console.log("test save method");
          }
        });

        var search_view = new SearchView({ el: '#testid' });
        search_view.trigger("savenow", "test");
      });
    </script>
  </head>
  <body>
    <h1>test</h1>
    <input id="testid" type="button" value="testbutton" />
  </body>
</html>
于 2013-11-05T18:24:25.233 に答える
1

#testid として el を指定しています。次に、イベントを構成するときに #testid の #testid を参照するように指示しています。

events:{
"click #testid":"savenow"
}

events オブジェクトを

events:{
"click":"savenow"
}

ビューのすべての el (この場合は #testid) をターゲットにしているだけです。

または、イベントの構成をそのままにして、el を body に変更するか、検索パネルの親 div (テキスト入力フィールドやその他の設定、およびボタンが含まれていると想定しています) に変更することもできます。

于 2013-11-05T16:03:55.253 に答える
0 
events: {
    "click": 'savenow'
},

どうぞ！elセレクターのないイベント タイプは、ビュー自体にイベント リスナーを追加します。

于 2013-11-05T15:57:14.303 に答える