Javascript 在下划线模板中呈现对象
tl;drJavascript 在下划线模板中呈现对象,javascript,backbone.js,underscore.js,Javascript,Backbone.js,Underscore.js,tl;dr 我将项目集合呈现到主干视图中,将它们传递到数组中的父视图中,并尝试从下划线模板中显示它们。我得到的不是html,而是[objecthtmldevelment] 完整描述 我有一种视图生成器,可以: 我从后端接收数据 我将它逐行发送到视图生成器 我将接收回渲染视图 该过程的要点是接收来自不同源的一般句柄响应,其中来自每个源的数据需要进行不同的解析。我知道并且已经根据请求为每个集合定义了解析方法 相关代码: var ResultGroupView = Backbone.View.exte
我将项目集合呈现到主干视图中,将它们传递到数组中的父视图中,并尝试从下划线模板中显示它们。我得到的不是html,而是
[objecthtmldevelment]
完整描述
我有一种视图生成器,可以:
var ResultGroupView = Backbone.View.extend({
tagName: 'tbody',
initialize: function (options) {
var self = this;
self.collection = new ResultGroupModel();
self.parent = options.parent;
self.collection.bind('add', self.renderItem, self);
_.bindAll(self, 'render', 'renderItem', 'addItem');
[...]
}
template: _.template(resultGroupTemplate),
addItem: function (item) {
var self = this;
var values = [];
//a new item is being added to the collection. get the details on how to parse it
_(self.parent.getColumns()).each(function (v) {
values.push(((!!v.parser) ? v.parser.call(self, item[v.Id]) : item[v.Id]));
});
//due to the binding above, this next line triggers the renderItem function
self.collection.add(new ResultItemModel({ Id: item.Id, Values: values }));
},
renderItem: function (item) {
var self = this;
//ResultItemView has tagName: 'tr'
var itemView = new ResultItemView({
model: item,
parent: self
});
self.$el.append(itemView.render().el);
},
[...]
});
每种类型的数据都定义了不同的解析器
函数。具体地说,我们有v.parser.call(self,item[v.Id])
,这是对视图生成器的调用。解析器只需创建主干视图
,并返回渲染对象
上面提到的ResultItemView
只是在下划线模板上呈现其视图,即:
<td><input type="checkbox" value="<%=Id%>" /></td>
<% _.each(Values, function(Val) { %>
<td>
<%=Val%>
</td>
<% }); %>
最后显示在显示
的地方的是[object htmligelement]
,[object htmligelement]
等等
显然,我在理解如何在视图之间传递信息并将其传递到模板中时存在一些基本错误。。。但我不知道有什么需要改变
我想使用类似于
node.outerHTML | | new XMLSerializer().serializeToString(node)代码>(如上所述)相当粗糙。。。有更好的办法吗?我怀疑你想得太多了。在您的renderItem
方法中,更改
self.$el.append(itemView.render().el);
。。。到
self.$el.append(itemView.render().$el.html());
“解析器只是创建一个主干视图并返回渲染对象。”-好的。。所以我知道,parser
创建了一个主干视图。但你所说的“渲染对象”是什么意思。。?!!若解析器创建了一个主干视图,那个么为什么还要用解析后的值创建一个模型,并为该模型创建另一个视图,ResultItemView
。。?解析器创建的主干视图的目的是什么。。?!!那么,值
看起来像什么?@TJ我不清楚。。。“渲染对象”是子视图的元素。我之所以说呈现对象,是因为它是一堆html元素,但它还不在DOM中,在尝试添加它时,我得到了[object DivHtmlElement]
或类似的东西。实际上,我在这里有3个层,ResultGroupView
是顶层,ResultItemView
是中间层,“解析视图”是底层ResultGroupView
包含一个ResultItemModel
集合,该集合又包含一个“已解析视图”数组。然后自动呈现每个新的ResultItemModel
(bind('add',[…])
)好的,因此您有一个集合ResultGroup
和一个ResultGroup视图
,它为ResultGroup
中的每个ResultItem
呈现ResultItemView
。我得到了那个么多,但后来我迷路了——“ResultItemModel,它又包含一个“已解析视图”数组”为什么要在一个模型中存储很多视图。。?如果值
实际上是主干视图的数组,为什么要使用下划线打印视图对象的属性。。?!!这些视图应该有一个渲染方法,该方法渲染它的数据,您应该将它们附加到DOM中。“上面提到的ResultItemView只是渲染它的视图”——您所说的视图是什么意思ResultItemView
是视图本身。我不明白当您尝试传递一个视图数组并尝试将它们作为html模板打印时,您希望看到什么。您试图使用下划线模板打印这样的嵌套javascript对象,这一事实毫无意义。。。我相信您看到的是object.toString()
的输出。你希望看到什么@TJ嗯,我想我为什么要在模型中存储视图的实际答案只是我的设计有缺陷。。。正如您所说,我实际上看到了对象.toString()
输出。我想我正在重新设计这些视图。谢谢:)