骨干点击事件在集合视图中不起作用

Question

我是刚接触背骨的人，（Backbone.js 1.0.0）这是我的示例HTML页面，其中我使用视图和模型，我有一个按钮和文本字段，并且每次单击该按钮时，我需要显示文本字段的内容为'<li>'标记，这是我的html页面

  <!DOCTYPE html>
    <html>
    <head>
    <title>Backbone Application</title>
    <script src="js/jquery.js" type="text/javascript"></script> 
    <script src="js/underscore.js" type="text/javascript"></script> 
    <script src="js/backbone.js" type="text/javascript"></script> 
    </head>
    <body>
    <input type="text"  id="txt1">
    <button class="btn1">Save</button>
    </body>

    <script>
    var Car = Backbone.Model.extend({
           initialize: function(){
        console.log('car model created...');

     } ,
     defaults: {
         name: 'alto'

     }  
    });
    // A List of People
    var CarCollection = Backbone.Collection.extend({
        model: Car,
        initialize: function(){
        console.log('Car Collection created...');
      }

    });
    carView = Backbone.View.extend({

        tagName: 'li',

        initialize: function() {
        console.log('Car view created...');
        },

        render: function( model ) {
               this.$el.html(this.model.get('name'));
               return this;  // returning this from render method..
            console.log('rendered')
        },

    });
    CarCollectionView = Backbone.View.extend({

        tagName: 'ul',

        initialize: function() {
        console.log('Car Collection View created');
         this.collection.on("add", this.render, this);
        },
        events: {
             'click .btn1':'getcar'
           },
           getcar: function() {
               console.log('Artist model changed...'+$('.nameField').val());
               var car_name = $('#txt1').val();
               this.collection.add({name:car_name} );
           },
        render: function(){
            this.collection.each(function(car){
                var carView1= new carView({ model: car });
                this.$el.append(carView1.render().el); // calling render method manually..
            }, this);
            return this; // returning this for chaining..
        }

    });
    var carCollection = new CarCollection([
        {
            name: 'maruthi'
        }]);
    var carCollectionView = new CarCollectionView({ collection: carCollection });
    $(document.body).append(carCollectionView.render().el);
    </script>
    </html> 

我第一次调用集合视图时它正在工作，但是当我单击按钮时，什么也没有发生，任何帮助将不胜感激

Answer 1

我认为您需要首先了解事件如何在ribs.js视图中工作。 在视图中指定事件哈希时，主干将这些事件委托给视图的el 。 在您的情况下，由于按钮不是集合视图的后代，因此不会触发事件。

例如，如果您的HTML和集合视图进行了轻微修改，则应触发事件。

HTML

<div id="carCnt">
   <input type="text"  id="txt1">
    <button class="btn1">Save</button>
   <ul id="carList"></ul>
</div> 

视图

CarCollectionView = Backbone.View.extend({

        el: '#carCnt',

        initialize: function() {
        console.log('Car Collection View created');
         this.collection.on("add", this.render, this);
        },
        events: {
             'click .btn1':'getcar'
           },
           getcar: function() {
               console.log('Artist model changed...'+$('.nameField').val());
               var car_name = $('#txt1').val();
               this.collection.add({name:car_name} );
           },
          render: function(){
     //clear list first
          this.$el.find('#carList').empty();
        this.collection.each(function(car){
            var carView1= new carView({ model: car });

          this.$el.find('#carList').append(carView1.render().el); // calling render method manually..
        }, this);
        return this; // returning this for chaining..
    }

    });

这是指向jsbin的链接

这应该可以使您当前的代码正常工作，但是一般而言，您可能希望从DOM渲染集合视图，并在渲染之后附加它。