Question

如果单击按钮或触发事件，为什么不触发事件？我错过了什么？

<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>

上面的例子几乎被复制了，但在我的情况下它没有用。

Answer 1

你有几个问题。正如其他人的答案所示，events对象需要更改。这将默认情况下将click事件绑定到#testid，因为那是视图的el。关于这个主题的一些阅读delegateEvents。

events: {
  'click' : 'savenow'
}

您的第二个问题是 - 代码在加载DOM之前加载。这意味着，您的视图无法绑定到testid元素。要解决此问题，您需要将代码包装在document.ready()函数中。

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

第三个问题是，当您致电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>

Answer 2

你给el作为#testid - 然后，当你配置事件时，你告诉它在#testid中查找#testid：as

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

将事件对象更改为

events:{
"click":"savenow"
}

您只是定位所有视图的el（在本例中为#testid）。

或者，您可以保留事件配置，并将el更改为正文或搜索面板的父div（我假设包含文本输入字段或其他设置，以及按钮）

Answer 3

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

你走了！没有选择器的事件类型会在视图el本身上添加事件侦听器。

骨干视图+事件

3 个答案: