Question

无法在骨干视图中注册按钮点击事件。视图本身显示正常，正确的数据替换为模板，但是当我单击生成的按钮时，没有任何反应。有什么想法吗？

我的观点定义为：

var IndividualNoteView = Backbone.View.extend({

    template:$("#indivNoteTemplate").html(),

    events: {
        'click .removeItem': "buttonClickHandler",
    },

    initialize : function (options) {
        console.log("Creating new indiv note view");

        this.options = options || {};
        this.gridster = this.options.gridster;
        this.noteModel = this.options.noteModel;
        this.row = this.options.row;
        this.col = this.options.col;
        this.el = $("#"+this.noteModel.get("noteId"));
        console.log("my domain- "+this.el.selector);
        this.noteModel.on('remove', this.destroy_view);
    },

    render: function(){
        var tmpl = _.template(this.template);
        this.el = tmpl(this.noteModel.toJSON());
        this.gridster.add_widget(tmpl(this.noteModel.toJSON()));
    },

    buttonClickHandler : function(event){
        alert( $(event.currentTarget).text());

        return false;
    }
});

和我的模板（在我的index.html中）定义为：

<script id="indivNoteTemplate" type="text/javascript">
<li id="<%= noteId%>">
   <div>Text: <%= text%></div> 
   <button class="removeItem">Remove</button></li>
</script>

Answer 1

您需要设置el属性主干将事件绑定到视图el。

例如：

el: '#container'

或者你可以：

id: function()
{
    return this.noteModel.get('noteId');
}

然后使用this.$el而不是在初始化函数中执行this.el = $("#"+this.noteModel.get("noteId"));。

您不需要在模板中执行id="<%= noteId%>"，因为骨干网会为您处理。

Answer 2

在调用initialize时，您的模板尚未呈现，因此this.el = $("#"+this.noteModel.get("noteId"));可能不会选择任何内容。

此外，Backbone.View会为您创建元素，因此您不需要这样做。

根据Backbone docs你的渲染函数应该看起来更像这个

render: function(){
    var tmpl = _.template(this.template);
    this.$el.html(tmpl(this.noteModel.toJSON()));
    this.gridster.add_widget(this.$el);
}

如果您想手动设置.el属性，则必须调用setElement以正确设置Backbone View。你可以看到这是used internally here。

骨干按钮单击事件未触发

2 个答案: