在下划线模板中渲染对象答案

【问题标题】：Render object in underscore template在下划线模板中渲染对象
【发布时间】：2016-01-03 18:03:26
【问题描述】：

tl;dr
我将一组项目渲染到主干视图中，将它们传递给数组中的父视图，并尝试在下划线模板中显示它们。我得到的是[object HtmlDivElement]，而不是html。

完整说明

我有一种视图生成器：

我从后端接收数据，
我将它逐行发送到视图生成器
我收到了渲染视图

该过程的重点是接收来自不同来源的通用句柄响应，其中来自每个来源的数据需要以不同方式解析。我知道并且已经根据请求为每个集合定义了解析方法。

相关代码：

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);
    },
    [...]
});

每种类型的数据都定义了不同的parser 函数。具体来说，我们有v.parser.call(self, item[v.Id])，这是对视图生成器的调用。解析器只是创建一个主干View 并返回渲染的对象。

上面提到的ResultItemView 只是将其视图呈现在一个下划线模板上，即：

<td><input type="checkbox" value="<%=Id%>" /></td>
<% _.each(Values, function(Val) { %>
    <td>
        <%=Val%>
    </td>
<% }); %>

最终显示在<%=Val%> 的位置是[object HtmlImgElement]、[object HtmlDivElement] 等等。

显然，我在理解如何在视图之间传递信息和将信息传递到模板方面存在一些基本错误......但我不知道需要更改什么。

我觉得使用类似于node.outerHTML || new XMLSerializer().serializeToString(node);（如here 所述）的东西相当老套...有没有更好的方法解决这个问题？

【问题讨论】：

“解析器只是创建了一个主干视图并返回渲染的对象。” - 好的.. 所以我知道parser 创建了一个主干视图。但是你说的“渲染的对象”是什么意思。..？！！如果解析器创建了主干视图，您为什么要再次创建具有解析值和另一个视图的模型，ResultItemView 为该模型..？解析器创建的主干视图的目的是什么......？！！ values 看起来像什么......？
@TJ 我不清楚...“渲染的对象”是子视图的元素。我说 rendered object 因为虽然它是一堆 html 元素，但它还没有在 DOM 中，并且在尝试添加它时，我得到 [object DivHtmlElement] 或类似的东西。我这里实际上有 3 层——ResultGroupView 是顶层，ResultItemView 是中间层，而“parsed view”是底层。 ResultGroupView 包含 ResultItemModel 的集合，而 ResultItemModel 又包含“已解析视图”的数组。然后自动渲染每个新的ResultItemModel (bind('add',[...]))
好的，所以你有一个集合ResultGroup 和一个ResultGroupView，它为ResultGroup 中的每个ResultItem 呈现ResultItemView。我得到了那么多，但后来我迷路了——“ResultItemModel，它又包含一个“解析视图”的数组”为什么你要在模型中存储很多视图..？如果values 真的是一个主干视图数组，你为什么要尝试使用下划线打印视图对象的属性..？！！这些视图应该有一个渲染方法来渲染它的数据，你应该将它们附加到 DOM。
"上面提到的 ResultItemView 只是呈现它的视图" - 你说的 它的视图 是什么意思..？ ResultItemView 是视图本身。当您尝试传递一组视图并尝试将它们打印为 html 模板时，我不明白您希望看到什么。您尝试使用下划线模板打印这样的嵌套 javascript 对象这一事实没有意义……我相信您会看到 object.toString() 的输出。你希望看到什么……？！
@TJ 好吧，我想我为什么要在模型中存储视图的实际答案只是我的设计有缺陷......正如你所说，我实际上看到了object.toString()输出。我想我正朝着重新设计这些视图的方向前进。谢谢:)

标签： javascript backbone.js underscore.js

【解决方案1】：

我怀疑你想多了。是否像在您的renderItem 方法中那样简单地更改...

self.$el.append(itemView.render().el);

...到...

self.$el.append(itemView.render().$el.html());

... ?

【讨论】：