Backbone.js：为什么事件不在列表视图中触发？

我有这个主干代码，我不明白为什么我的视图中的事件不起作用。我的应用程序应该是一个可编辑的图库。因此，我在html元素$（#obrazekDetail）内创建了一个视图（一个图库视图），并使用ObrazekViews来获取它。我想触发ObrazekView上的事件，我无法使其工作。再次提出相同类型的问题的道歉。但我找不到合适的解决方案。骨干JavaScript和HTML代码如下：Backbone.js：为什么事件不在列表视图中触发？

<table id="obrazekDetail" cellspacing="0" cellpadding="2"> 
</table> 
    <!-- Templates --> 
<script type="text/html" id="template-obrazek"> 
    <tr id="<%= order %>"> 
     <td><img src="<%= obrazek %>"/> 
     </td> 
     <td>Nadpis:<input name="nadpis" value="<%= nadpis %>" /></td> 
     <td>Popis:<input name="popis" value="<%= nadpis %>" /></td> 
     <td><input class="edit" type="submit" name="action" value="Edit" /></td> 
     <td><input class="delete" type="submit" name="action" value="Delete" /></a></td> 
    </tr> 
</script> 

<script type="text/template" id="galerie-template"> 

</script> 

// js code 

$(function(){ 

    window.app = window.app || {}; 
    window.app.obrazek = new Obrazek(); 
    window.app.obrazky = new Obrazky(); 
    window.app.view = new GalerieView(); 
}); 


var Obrazek = Backbone.Model.extend({ 
url : function() { 
    return "/ajax-obrazek/" + this.id + "/"; 
} 
}); 

var Obrazky = Backbone.Collection.extend({ 
    model: Obrazek, 
    initialFetch: function() { 
     var self = this; 
     $.each(obrazky_data, function(i, object) { 
      var obrazek = new Obrazek(); 
      obrazek.set({ 
       id: object.pk, 
       nadpis: object.fields.nadpis, 
       popis: object.fields.popis, 
       order: object.fields.order, 
       obrazek: object.fields.obrazek 
       }); 
      self.model = obrazek; 
      self.add(self.model); 
     }); 
    } 
}); 
var ObrazekView = Backbone.View.extend({ 
    template: _.template($("#template-obrazek").html()), 
    events: { 
     "click input.edit" : "edit", 
     "click input.delete" : "clear" 
    }, 
    initialize: function() { 
     this.model.bind('change', this.render, this); 
     this.model.bind('destroy', this.remove, this); 
     console.log(this); 
    }, 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 
    clear: function() { 
     console.log('test'); 
     this.model.destroy(); 
    }, 
    edit: function() { 
      console.log('test'); 

    } 

}); 
var GalerieView = Backbone.View.extend({ 
    el: $("#obrazekDetail"), 

    initialize: function() { 
     window.app.obrazky.bind('add', this.addOne, this); 
     window.app.obrazky.bind('reset', this.addAll, this); 
     window.app.obrazky.bind('all', this.render, this); 
     window.app.obrazky.initialFetch(); 
    }, 
    render: function() { 
     return this; 
    }, 
    addOne: function(obrazek) { 
     var view = new ObrazekView({model: obrazek}); 
     this.$el.append(view.render().el.innerHTML); 
    }, 
    addAll: function() { 
      window.app.obrazky.each(this.addOne); 
    } 
});

来源

2013-01-05 jenda

尝试将'input type ='submit''更改为'input type ='button''并查看它是否有效 – deven98602

感谢您的回答。不幸的是它没有帮助。 – jenda

当u做this.$el.append(view.render().el.innerHTML);你提取纯HTML和剥离附着于它们的所有事件。当u使用

events: { "click input.edit" : "edit" },

定义事件你可能会认为事件是直接连接到input.edit，但它不是。 Backbone将事件附加到el并将其委托给与选择器匹配的子元素。因此，在运行时，如果您附加了另一个元素，该事件仍然可以在其上运行。

因此，只是使用这种传统的方式this.$el.append(view.render().el);它维护所有事件，并没有给出令人惊讶的结果！

来源

2013-01-05 12:29:20 deven98602

Backbone.js：为什么事件不在列表视图中触发？

回答

相关问题