javascript 骨干模板嵌套在另一个模板中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10659766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
backbone template nested in another template
提问by mbr1022
Is it possible to have a template nested inside a template and access via backbone view?
是否可以将模板嵌套在模板中并通过主干视图访问？
For example I have View1 using Template1, and View2 using Template2. Template2 actually needs to be in a DIV inside of Template1. I put the DIV container for template2 inside template1 with the appropriate id, but it doesn't show when page is rendered. If I remove Template2 div container from inside Template1 and just put it in the page body it works fine.
例如，我有使用 Template1 的 View1，和使用 Template2 的 View2。Template2 实际上需要在 Template1 内的一个 DIV 中。我将 template2 的 DIV 容器放在具有适当 id 的 template1 中，但它在页面呈现时不显示。如果我从 Template1 内部删除 Template2 div 容器并将其放在页面正文中，它可以正常工作。
So just wondering if this is possible, or if I have to nest the views/models, etc. to make this work?
所以只是想知道这是否可能，或者我是否必须嵌套视图/模型等才能使其工作？
The data in Template2 is not technically related to Template1 is just needs to display in a position on the page that's embedded in Template1.
Template2 中的数据在技术上与 Template1 没有关系，只是需要显示在嵌入在 Template1 中的页面上的某个位置。
回答by RTigger
The way I've dealt with this in the past is to define both views separately, and then when you render View1, create a new View2, render it, and insert it into View1. So:
我过去处理这个的方法是分别定义两个视图，然后在渲染View1时，创建一个新的View2，渲染它，然后将其插入到View1中。所以：
window.View1 = Backbone.View.extend({
render: function() {
this.view2 = new View2();
this.$('insert-view-here').append(this.view2.render().el);
}
});
回答by Trevor
You should create subviews for this.
您应该为此创建子视图。
I like to privatize subviews in closure and return the public view.
我喜欢在关闭时私有化子视图并返回公共视图。
var View = (function (BV) {
var View, Subview;
// Only this main view knows of this subview
Subview = BV.extend({
template: _.template( subtmpl ),
render: function () {
this.$el.html( this.template( this.model.toJSON() ) );
return this;
}
});
View = BV.extend({
template: _.template( tmpl ),
render: function () {
this.$el.html( this.template( this.model.toJSON() ) );
var subview = new SubView({ model: this.model });
// replace a div in your template meant for teh subview with the real subview
this.$el.find( "#subview" ).replaceWith( subview.render().el );
return this;
}
});
return View;
}(Backbone.View));
var view = new View({ model: user });
var subview = new Subview; // Reference Error
回答by ericsoco
Another option that's useful when you need to include Template2 multiple times within Template1, say as <li>elements within a <ul>, is to pass a Template2 function into Template1. (From Rico Sta Cruz' Backbone Patterns.)
当您需要在 Template1 中多次包含 Template2 时（例如作为 a 中的<li>元素），另一个有用的选项<ul>是将 Template2 函数传递给 Template1。（来自Rico Sta Cruz 的 Backbone Patterns。）
TasksList = Backbone.View.extend({
// Template1, inlined in js.
template: _.template([
"<ul class='task_list'>",
"<% items.each(function(item) { %>",
"<%= itemTemplate(item) %>",
"<% }); %>",
"</ul>"
].join('')),
// Template2, inlined in js.
itemTemplate: _.template(
"<li><%= name %></li>"
),
render: function() {
var html = this.template({
items: tasks /* a collection */,
itemTemplate: this.itemTemplate
});
$(this.el).append(html);
}
});
回答by hexalys
A more lean solution without the need for jQuery append()or the additional SubView object involving a double jQuery scope, is to pre-render/precompile strictly using the underscore method, and insert the subview as a string, using an inner comment tags in your main template.
不需要 jQueryappend()或涉及双 jQuery 范围的附加 SubView 对象的更精简的解决方案是严格使用下划线方法预渲染/预编译，并使用主模板中的内部注释标签将子视图作为字符串插入.
View = Backbone.View.extend({
template: _.template(...),
prerender: function(tpl,model){// pre-render a component
var template = _.template(tpl);
return template(model);
},
render: function(){
var model = { ... };
var component = this.prerender(this.itemTemplate, model);
this.$el.html(this.template(model).replace('<!--#component-->', component));
}
});
It's useful especially if your template isn't a constant, and depends on a property of the current scope.
如果您的模板不是常量，并且取决于当前作用域的属性，则这尤其有用。
Noting that for the scope of this question, you'd have to pass the View2 model to the component.
请注意，对于此问题的范围，您必须将 View2 模型传递给组件。
回答by Michi Kono
The typical way as I understand it is to think of views as complete objects that you can embed in each other. Let's say you have two views, ViewA and ViewB. The following code shows how you could append ViewB into ViewA.
我理解的典型方法是将视图视为可以相互嵌入的完整对象。假设您有两个视图，ViewA 和 ViewB。以下代码显示了如何将 ViewB 附加到 ViewA 中。
# this is coffeescript, but it's easily translated to JS
class ViewA extends Backbone.View
initialize: () ->
this.render()
render: ()->
this.$el.append(new ViewB().$el)
this.$el.append(new ViewB().$el)
return this
You could get fancy with how ViewB is managed (assigning it to properties or whatever) or pass different constructor arguments into each ViewB instance.
您可以了解 ViewB 的管理方式（将其分配给属性或其他任何内容）或将不同的构造函数参数传递给每个 ViewB 实例。
