Question

让我首先展示我需要的东西，这样你才能理解我的问题。我有一个联系人视图：

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

Answer 1

看起来您正在使用underscore.js来渲染模板，下划线.js为模板中的rendering a collection提供了一种方法（请看第二个示例）。例如

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：视图中的视图列表

1 个答案: