Question

我需要制作一个小学生列表，因为我制作了内联模板来制作元素并附加点击事件......

但是我无法获得元素事件触发器和它的模型......

我怎样才能实现这一目标？

我的代码：

define("appView", ["backbone"], function(Backbone){

    "use strict"

    var appView = Backbone.View.extend({
        template:_.template("<li><%= name %></li>"),
        events:{
            "click" : "listTrigger"
        },
        initialize:function(){
            this.render();
        },
        render:function(){
            return this.template(this.model.toJSON());
        },
        listTrigger:function(){
            console.log("List triggered", this.model); //not working...
        }
    });

    return{
        getView: appView
    }

})

Answer 1

你有各种各样的问题：

视图周围绑定到视图el的事件，但您既不用HTML填充el，也不将视图的el放入DOM。显然你正在做html = v.render()，然后将html添加到DOM。
您的模板无法使用通常的Backbone方法。您最终会以<div><li>...</li></div>作为您的HTML并且这不是有效的HTML;如果HTML格式无效，浏览器可能会尝试纠正它并造成大麻烦。

如果您希望自己的观看次数为<li>，那么您需要使用tagName告诉Backbone使用<li>，然后将内容放入{{1} }}：

template

然后，您必须修复tagName: 'li', template: _.template('<%= name %>')以填充render：

this.el

render: function() { this.$el.html(this.template(this.model.toJSON())); return this; }是常规的，所以我补充说，这样做可以让你做这样的事情：

return this

这种模式不仅方便，而且任何使用过Backbone的人都会立即认出。

此外，我假设使用此视图的任何内容都会将实例放入$('ul').append(v.render().el)，<ul>或<ol>元素，因为它们是the only valid parents for an <li>：

允许的父元素

<menu>，ul，ol

不触发点击事件 - 我在骨干网中使用内联模板

1 个答案: