backbone.js - Backbone : A list of views inside a view

Question

让我先展示一下我需要什么，以便您了解我的问题。我有一个像这样的联系人 View :

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);
    }
});

到目前为止一切顺利，问题是电话部分是一个列表，我的模型包含一个电话数组，我需要将它动态地放入该模板中。

我的想法是创建另一个模型并为此查看 Phone 和 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: 这只是一个例子，我的应用程序还有其他几个部分需要这个，一个 View 需要生成包含列表中内容的 subview 。

Answer 1

看起来你正在使用 underscore.js 来呈现你的模板，underscore.js 为 rendering a collection 提供了一种方式在模板中(看第二个例子)。例如

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

您还可以为每个模型渲染一个单独的 View ，并在同一个渲染模型中修改 el 以在那里渲染它，但除非您需要该 View (例如，内容会改变或者您重新收听事件)这样做可能不值得。这是您如何实现该目标的示例

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;
}

此外，如果您要走这条路，请注意缓存 View 可能会付出代价，但是如果您只需要呈现内容，那么只将电话号码保留为数组并呈现可能会付出代价它在模板中。