Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在下划线模板中呈现对象_Javascript_Backbone.js_Underscore.js - Fatal编程技术网

Javascript 在下划线模板中呈现对象

Javascript 在下划线模板中呈现对象,javascript,backbone.js,underscore.js,Javascript,Backbone.js,Underscore.js,tl;dr 我将项目集合呈现到主干视图中,将它们传递到数组中的父视图中,并尝试从下划线模板中显示它们。我得到的不是html,而是[objecthtmldevelment] 完整描述 我有一种视图生成器,可以: 我从后端接收数据 我将它逐行发送到视图生成器 我将接收回渲染视图 该过程的要点是接收来自不同源的一般句柄响应,其中来自每个源的数据需要进行不同的解析。我知道并且已经根据请求为每个集合定义了解析方法 相关代码: var ResultGroupView = Backbone.View.exte

tl;dr
我将项目集合呈现到主干视图中,将它们传递到数组中的父视图中,并尝试从下划线模板中显示它们。我得到的不是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()
    输出。我想我正在重新设计这些视图。谢谢:)