0

在我看来，我有以下主干代码（不是完整代码）：

render: function(){
    _.each(this.model_admin.getModelPool(), function(model){
        $("#anydata").append("<div class='row list-entry'></div>");
        view = new App.Views.ListItemView({el: $(".list-entry").last(), model: model, admin: this.admin})
        view.render();
    });
},

App.Views.ListItemView = Backbone.View.extend({
template: JST["listEntry"],

events: {
    "click .list-val" : "showModel"
},

initialize: function(options){
    this.el = options.el;
    this.model = options.model;
    this.admin = options.admin;
},

render: function(){
    $(this.el).html(this.template({name: this.model.modelName}))
},

意图是创建一个 ListItemView 列表。在 ListItemView 中，有一个“单击 .list-entry”事件。

如果我将“#anydata”作为 el 传递给 ListItemView 会更容易。然后将追加放在 ListItemView 而不是 html() 上。但是，它复制了我的事件。有没有更好的方法来做到这一点？谢谢。

4

1 回答 1

0

当您让自己的观点完全拥有自己el的观点时，事情往往会变得更好；这是使用 Backbone 做事的常用方法，它有助于避免奇怪的事件问题和某些类型的僵尸。

你render应该看起来更像这样：

render: function() {
    _.each(this.model_admin.getModelPool(), function(model) {
        var view = new App.Views.ListItemView({ model: model, admin: this.admin });
        $('#anydata').append(view.render().el);
    });
    return this; // This is standard practice.
}

#anydata如果是那个观点，上面会更好el。

然后你可以让ListItemView创建<div class="row list-entry">作为它的el：

App.Views.ListItemView = Backbone.View.extend({
    className: 'row list-entry',

    template: JST["listEntry"],

    events: {
        "click .list-val" : "showModel"
    },

    initialize: function(options) {
        this.admin = options.admin;
    },

    render: function() {
        this.$el.html(this.template({ name: this.model.modelName }));
        return this; // Again, standard practice so that you can look at v.render().el
    },

    //...

请注意，视图构造函数会自动拉出一些东西options并使它们成为视图的属性：

constructor / initialize new View([options])
[...]
有几个特殊选项，如果通过，将直接附加到视图：model、collection、el、id、className和.tagNameattributes

所以我把你的initialize. 另请注意，视图已经具有$(this.el)in的缓存版本this.$el。您可以查看el文档以了解如何className使用。

于 2013-09-19T06:01:07.610 回答