Backbone.js绑定事件

Question

I found lots of questions for the same issue [events not being bound in view] and I was able to understand my mistakes and corrected it. 我针对同一问题发现了很多问题（事件未得到约束），我能够理解我的错误并予以纠正。 Although the following code is not working. 尽管以下代码无法正常工作。 Actually I'm not understanding the concept of views in backbone.js. 实际上，我不了解骨干.js中视图的概念。 How does view bind with collections? 视图如何与集合绑定？

    $(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();
    });

This is my html 这是我的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>

Expecting some good explanation on views 希望对观点有很好的解释

Answer 1

you need to pass the el to the view 您需要将el传递给视图

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

And apart form this you need to have the selector to bind the event as 除此以外，您还需要选择器将事件绑定为

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

I am not sure about the underscore template you are using . 我不确定您使用的下划线模板。 But when i tried your code the template did not load. 但是，当我尝试您的代码时，模板未加载。 I use the mustache.js templates which is lot simpler . 我使用mustache.js模板，该模板要简单得多。

Answer 2

when you specify the el in the View it creates an el with that tag name rather than selecting the tag from the DOM . 当您在视图中指定el时，它将使用该标签名称创建一个el，而不是从DOM中选择标签。 So if you send the el while initializing the View you would be able to bind events to any element in the passed el. 因此，如果您在初始化View时发送el，则可以将事件绑定到传递的el中的任何元素。

and using #text-input instead of button#text-input is more of a syntax thing , since the earlier one does not work but the latter one works 而使用＃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