Backbone.js绑定事件

Question

我针对同一问题发现了很多问题（事件未得到约束），我能够理解我的错误并予以纠正。 尽管以下代码无法正常工作。 实际上，我不了解骨干.js中视图的概念。 视图如何与集合绑定？

    $(function () { // Whole function executes after dom load
        var LeaveAMsg = Backbone.Model.extend({});
        var MsgCollection = Backbone.Collection.extend({
            model: LeaveAMsg    
        });

        var messages = new MsgCollection();
        var AppView = Backbone.View.extend({
            el:  "body", 
            events: {"click button#text-input" : "newMsg"} ,
            newMsg: function() {
                 alert('hai');
                 var inputField = $('input[name=newMessageString]');
                 messages.create({content: inputField.val()});
                 inputField.val('');
                                     this.render();
            } ,
            render: function() {
                var content = this.model.get('content');
                $('.test-div').html(_.template($('#item-template').html(), {content:this.model.content}));
            },
            initialize: function () {
            }
        });
        var appview = new AppView();
    });

这是我的HTML

<body>
<div class='finaltry'>
<input type='text' name='newMessageString' />
<input type='button' id='text-input' value='Clickme' />
</div>
<div class='test-div'>
</div>
<script type="text/template" id="item-template">
      <div>
        <font color='gray'> <%= content %>  </font>
      </div>
</script>
</body>

希望对观点有很好的解释

Answer 1

您需要将el传递给视图

  var body1 = document.getElementsByTagName('body');
   var appview = new AppView({
       el: body1
   });

除此以外，您还需要选择器将事件绑定为

 events: {"click #text-input" : "newMsg"} ,

我不确定您使用的下划线模板。 但是，当我尝试您的代码时，模板未加载。 我使用mustache.js模板，该模板要简单得多。

Answer 2

当您在视图中指定el时，它将使用该标签名称创建一个el，而不是从DOM中选择标签。 因此，如果您在初始化View时发送el，则可以将事件绑定到传递的el中的任何元素。

而使用＃text-input而不是button＃text-input更像是一种语法，因为前一个不起作用，而后一个起作用

Backbone.js绑定事件

问题描述

2 个解决方案

解决方案1
2 已采纳 2012-01-31 21:03:56

解决方案2
1 2012-02-01 06:02:23

Backbone.js绑定事件

问题描述

2 个解决方案

解决方案1 2 已采纳 2012-01-31 21:03:56

解决方案2 1 2012-02-01 06:02:23

解决方案1
2 已采纳 2012-01-31 21:03:56

解决方案2
1 2012-02-01 06:02:23