主要成分：一个视图中视图的列表

本文介绍了主要成分：一个视图中视图的列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

让我告诉我需要什么第一，所以你能理解我的问题。我有这样一个联系人视图：

Let me show what I need first so you can understand my problem. I have a contact view like:

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

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

So far so good, the problem is that the phones part is a list, my model holds an array of phones, and I need to put it dynamically in that template.

我的想法是创建另一个模型和视图手机和PhoneView只是这一点。然后在ContactView我将创建一个方法render_phones，如：

What I thought was to create another model and view Phone and PhoneView just for this. And then in the ContactView I would create a method render_phones, like:

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模板是：

I changed the ContactView template to this:

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

但是，如何使我的渲染方法得到呈现，并把模板中的电话列表？

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

I couldn't find a pattern to deal with situations like this. And the code is starting to look not so good.

PS：这只是一个例子，有我需要这我的应用程序的其他几个部分，即需要在列表中的内容来生成子视图的视图

ps: This is just an example, there are several other parts of my application that I need this, a view that need to generate subviews with content in a list.

推荐答案

看起来你正在使用underscore.js来渲染你的模板，为underscore.js的在模板中呈现集合（看第二个例子）。例如：

It looks like you are using underscore.js to render your templates, underscore.js provides a way for rendering a collection within a template (look at the second example). for example

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

您还可以令每个型号的个人观点，并在同一渲染模型修改报渲染它在那里，但除非你需要的视图（例如内容会改变，或者你正在收听的事件），它可能不值得这样做的。这里是你如何能做到这样的例子

You can also render an individual view for each model and in the same render model modify the el to render it there, but unless you need the view (for example the content will change or you're listening to events) it probably doesn't pay to do it that way. Here's an example of how you could accomplish that

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

此外，如果你走这条路线则请注意，它可能会付出缓存的意见，但同样，如果你需要的是呈现内容，那么它可能会付出只保留电话号码作为一个数组和渲染它在模板中。

Also if you were to go this route then note that it would probably pay to cache the views, but again if all you need is to render the content then it would probably pay to just keep the phone numbers as an array and render it within the template.