2

让我先展示我需要什么，以便您了解我的问题。我有一个联系人视图，例如：

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：这只是一个例子，我的应用程序还有几个其他部分需要这个，一个需要生成包含列表内容的子视图的视图。

4

1 回答 1

5

看起来您正在使用 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;
}

此外，如果您要走这条路，请注意缓存视图可能会有所帮助，但如果您只需要呈现内容，那么将电话号码保留为数组并将其呈现在模板。

于 2012-06-26T14:30:47.700 回答