Question

我有一个看起来像这样的视图

define([
    'jquery',
    'underscore',
    'backbone',
    'models/appModel',
    'text!templates/index.html'
   ],function( $, _, Backbone, AppModel, IndexViewTemplate ){

    var IndexView = Backbone.View.extend({
    initialize: function () {

    },
    render: function () {
        var appModel = new AppModel();

        // fetching the data from the server
        window.appModel = appModel.fetch({

            error: function(){
                console.log('Failed to fetch data from model');
            },
            success: function(results){
                var data = results.attributes.data;

                // using the underscore template engine
                var el = $('#messageList');
                el.append( _.template( IndexViewTemplate, {data:data} ));
            }
        });
    },

    events:{
        'click .message' : 'showMessage'
    },

    showMessage : function () {
        console.log('aome message');            
    }
  })

return IndexView;

})

基本上，我从服务器获取数据，并使用下划线模板引擎从该数据创建DOM上的元素。问题是在DOM上创建了div元素，但是没有触发click事件，我认为事件在创建之前就被分配给了元素，这就是为什么不激发任何东西。

任何想法？

Answer 1

Backbone使用名为delegateEvents()的视图方法绑定事件。该方法使用

将事件选择器范围限定为视图的选择器

this.$el.on(eventName, selector, method);

如果你想将视图方法绑定到视图之外的元素，你将不得不采用旧式的方式，

$(selector).click(this.someMethod);

确保使用Underscore的_.bindAll之类的方法将方法绑定到视图对象，并在处理视图时调用$.off。

主干事件不是用下划线模板触发的

1 个答案: