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需要更改对象。默认情况下，这会将 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>
于 2013-11-05T18:24:25.233 回答
1

您将 el 提供为 #testid - 然后，您告诉它在配置事件时在 #testid 内部查找 #testid：

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

通过将事件对象更改为

events:{
"click":"savenow"
}

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

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

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

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

于 2013-11-05T15:57:14.303 回答