渲染對象下劃線模板

TL;博士
我呈現的項目集合到骨幹視圖，通過他們來說明是什麼將是一個數組的父視圖，並嘗試從一個下劃線模板中顯示出來。而不是html，我得到[object HtmlDivElement]。渲染對象下劃線模板

全面介紹

我有一種觀點產生的這樣的：

我從我的後端接收數據，
我通過線
我收到回報的視圖

這個過程的重點是一般接收來自不同源的響應，其中來自每個源的數據需要以不同的方式進行解析。我知道並根據請求定義了每個集合的解析方法。

相關的代碼：

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所述）使用的東西是相當黑客...有沒有更好的解決方法呢？

來源

2016-01-03 Guy Passy

*「解析器只是創建一個主體視圖並返回呈現的對象。」* - 好吧..所以我明白'parser'創建一個主幹視圖。但是，你的意思是「渲染對象」。* ..？!!如果解析器創建骨幹視圖，你爲什麼又創建與解析的值，該模型的模型和另一種觀點認爲，'ResultItemView' ..？解析器創建的骨幹視圖的目的是什麼？？!! 「價值」看起來像什麼？ –

@TJ我不清楚......「*渲染對象*」是一個子視圖的元素。我說*呈現對象*是因爲雖然它是一堆html元素，但它還不在DOM中，並且在嘗試添加它時，我得到了'[object DivHtmlElement]'或其他一些東西。我實際上有3層 - 「ResultGroupView」是最上層，「ResultItemView」是中間層，「* parsed view *」是最底層。 'ResultGroupView'包含一個'ResultItemModel'的集合，該集合又包含一個「* parsed view *」的數組。然後每個新的'ResultItemModel'自動呈現（'bind（'add'，[]]'） –

沒問題，所以你有一個集合'ResultGroup'和一個'ResultGroupView'，它爲每個呈現'ResultItemView' 'ResultGroup'中的'ResultItem'。我得到了那麼多，但後來我迷路了 - 「* ResultItemModel，它又包含」解析視圖「的數組* *」爲什麼你在模型中存儲大量視圖？如果'values'實際上是一個骨幹視圖數組，爲什麼要用下劃線打印視圖對象的屬性..？!!這些視圖應該有一個呈現方法，呈現它的數據，你應該將它們附加到DOM。 –

我懷疑你是在想這個。它是那樣簡單，在你renderItem方法，改變...

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

...到...

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

...？

來源

2016-01-03 19:00:47

渲染對象下劃線模板

回答

相關問題