主要成分:一个视图中视图的列表(Backbone: A list of views inside a

2019-06-25 18:50发布

让我给什么,我需要先所以你能理解我的问题。 我有一个联系人视图,如:

ContactView = Backbone.View.extend({
    template: _.template("Name: <%= name %>
                          E-mail: <%= email %>
                          Phones
                          <%= label1 %> - <%= number1 %>
                          <%= label2 %> - <%= number2 %>"),
    render: function() {
       var contact = this.template(this.model.toJSON());
       this.$el.html(contact);
    }
});

到目前为止好,问题是,手机的部分是一个列表,我的模型拥有手机的数组,我需要把它动态地在该模板。

我的想法是创建另一个模型和视图电话和PhoneView只是这一点。 然后在ContactView我将创建一个方法render_phones,如:

render_phones: function() {
    var phones = this.model.get('phones');
    var phones_str = "";
    for (var i in phones) {
        var phone = new Phone(phones[i]);
        var phoneView = new PhoneView({model: phone});
        phones_str += phoneView.render();
    }
    return phones_str;
}

我改变了ContactView模板这样:

template: _.template("Name: <%= name %>
                      E-mail: <%= email %>
                      Phones
                      <%= phones %>"),

但如何让我的渲染方法得到呈现,并把模板中的电话列表?

我找不到一个模式来处理这样的情况。 和代码开始看起来不那么好。

PS:这只是一个例子,有我需要这我的应用程序的几个部分,需要生成与列表中的内容子视图的视图。

Answer 1:

它看起来像您使用underscore.js渲染你的模板,underscore.js提供了一种方式呈现集合在模板中(看第二个例子)。 例如

template: _.template("Name: <%= name %>
                          E-mail: <%= email %>
                          Phones
                <% _.each(phones, function (phone) { %>
                 <%= label %> - <%= number %>
                <% }); %>"),

您也可以渲染一个单独查看每个模型,并在同一渲染模型修改el以使其出现,但除非你需要的视图(例如内容会改变,或者你正在收听的事件),它可能不支付这样做的。 这里是你如何能做到这样的例子

render: function () {
  this.$el.html(this.model.toJSON());
  _.each(this.model.get('phones'), function(phone) {
    this.$el.find('.phoneArea').append(new phoneView({model: phone}).render().el));
  },this);
  return this;
}

此外,如果你走这条路线则请注意,它可能会付出缓存的意见,但同样如果你需要的是呈现内容,那么它可能会支付只是不停的电话号码作为数组和内使其模板。



文章来源: Backbone: A list of views inside a view