0

我只需要列出一小部分学生，为此我制作了内联模板来制作元素并附加点击事件......

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

我怎样才能做到这一点？

我的代码：

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
    }

})
4

1 回答 1

1

您在这里遇到各种问题：

  1. 视图的事件绑定到视图，el但您既不使用 HTML 填充el，也不将视图el放入 DOM。显然你正在做html = v.render()然后添加html到 DOM。
  2. 您的模板不适用于通常的 Backbone 方法。你最终会得到<div><li>...</li></div>你的 HTML，这不是有效的 HTML；给定无效的 HTML，浏览器可能会尝试更正它并弄得一团糟。

如果您希望您的视图是单一的<li>，那么您想使用tagName告诉 Backbone 使用 an<li>然后将内容放入template：

tagName: 'li',
template: _.template('<%= name %>')

然后你必须修复你render的填充this.el：

render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
}

这return this是传统的，所以我添加了它，这样做可以让你做这样的事情：

$('ul').append(v.render().el)

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

此外，我假设使用此视图的任何内容都将实例放入 a <ul>、<ol>或<menu>元素中，因为它们是a的唯一有效父级<li>：

允许的父元素

ul, ol,menu

于 2013-05-13T16:41:34.010 回答