Question

TL;博士
我将一组项目渲染到Backbone Views中，将它们传递给数组中的父视图，并尝试在下划线模板中显示它们。我得到的是[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）的某些内容是相当愚蠢的......有更好的解决方法吗？

Answer 1

我怀疑你是在考虑这个问题。在您的renderItem方法中，更改......

就像这么简单

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

...到......

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

......？

在下划线模板

1 个答案: