骨幹視圖el作爲表列

有沒有人有任何成功使用Backbone.js垂直表列作爲視圖'el'？由於表格是基於行的，因此使用表格行作爲與視圖關聯的DOM容器是微不足道的。然而，我需要實現的佈局是垂直的，因此表格列將是我設計的'el'，但表格列沒有類似的容器元素，因爲表格佈局是水平的。骨幹視圖el作爲表列

到目前爲止，我還沒有能夠成功地爲表列創建子視圖，這意味着我綁定數據到我的DOM以檢索和操縱表列。我的設計變得複雜得多，這導致我重新評估原始方法，希望有更好的方法通過子視圖來管理這種情況。有任何想法嗎？

來源

2013-01-21 user1998321

您實際上是在呈現表格數據還是使用表格進行佈局？如果後者 - 不。 http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – jevakallio

如果您的數據以特定格式返回，並且符合垂直列格式，則可能會發生這種情況。顯然，tbody將成爲你的上下文，重複的列是其中的元素。 –

您的數據必須採用多種陣列格式。例如，[[{'第一列第一行'，'第一列第二'}]，[{4567，'第二列第一列'，'第二列第二列'}]]。對於每一列，您循環遍歷每個數組，直到到達列的末尾。 –

你可以採取的事實，即

的jQuery對象的DOM元素
骨幹的名單並不需要一個唯一的DOM節點（至少據我可以告訴）
this.$el在視圖中就可以成爲你想

考慮到這一點無論節點，可以使您的表中的一個去（見BackboneJS Rendering Problems，它的速度更快，並在你的c ase可能更容易），然後將您的子視圖應用於與模型關聯的表格單元格。我選擇了一個類名作爲選擇，但每行的第n個元素上的選擇器應該可以工作。

模板

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <% _(children).each(function(model) { %> 
       <th><%= model.id %></th>     
      <% }); %> 
     </tr> 
    </thead> 
    <tbody> 
    <% _(properties).each(function(prop) { %> 
     <tr> 
      <td><%= prop %></td> 
      <% _(children).each(function(model) { %> 
       <td class="<%= model.cid %>"><% print(model[prop]); %></td> 
      <% }); %> 
     </tr> 
    <% }); %> 
    </tbody> 
</table>

查看

ListView = Backbone.View.extend({ 
    initialize: function(opts) { 
     this.options = opts; 
    }, 
    render: function() { 
     var data, html, $table, template = this.options.template; 

     data = this.collection.map(function (model) { 
      return _.extend(model.toJSON(), { 
       cid: model.cid 
      }); 
     }); 

     html = this.options.template({ 
      children: data, 
      properties: ['id', 'name'] 
     }); 

     $table = $(html); 

     this.collection.each(function (model, ix) { 
      var $el = $table.find("." + model.cid), 
       subview = new ItemView({ 
        el: $el, 
        model: model 
       }); 
     }); 

     this.$el.empty(); 
     this.$el.append($table); 

     return this; 
    } 
});

正如您在本演示http://jsfiddle.net/nikoshr/psasT/12/檢查，每列由專用視圖處理。

來源

2013-01-22 17:25:13 nikoshr

哇，這是一種相當優雅的方式來管理一個'el'作爲元素集合而不是單個元素 - 我明確想到了這一點，但我認爲它不會奏效。我想我想用類似這個解決方案的東西去。 – user1998321

我想不出一個簡單的解決方案來解決您的問題。有多個視圖共享<table>元素，因爲el聽起來像是一個潛在的噩夢。

如何從不同角度攻擊問題，而不是使用HTML表格，從浮動的<div>元素構建表列，並將視圖綁定到這些元素？喜歡的東西：

<div class="faux-table"> 
    <div class="faux-column"> 
    <div class="faux-header">Col 1</div> 
    <div>Foo</div> 
    <div>Bar</div> 
    <div>Baz</div> 
    <div>Qux</div> 
    </div> 
    <div class="faux-column"> 
    <div class="faux-header">Col 2</div> 
    <div>Foo</div> 
    <div>Bar</div> 
    <div>Baz</div> 
    <div>Qux</div> 
    </div> 
</div>

而且一個CSS規則：

.faux-table > div.faux-column { 
    float:left; 
}

在this fiddle工作示例。這個解決方案當然是遠遠不夠完美的，因爲如果你有不同大小的內容，你必須實現自己的行大小。但是，如果您需要獲取由Backbone視圖呈現的表格，這可能是從JS角度來看最簡單的方法。

編輯：事實上，它發生在我，一個更好的，少脆弱的解決方案是使用表<td>元素列，只是執行行作爲<div>•不用任何CSS浮動黑客：

<table> 
    <tr> 
     <td class="faux-column"> 
      <div class="faux-header">Col 1</div> 
      <div>Foo</div> 
      <div>Bar</div> 
      <div>Baz</div> 
      <div>Qux</div> 
     </td> 
     <td class="faux-column"> 
      <div class="faux-header">Col 2</div> 
      <div>Foo</div> 
      <div>Bar</div> 
      <div>Baz</div> 
      <div>Qux</div> 
     </td> 
    </tr> 
</table>

Revised version in this fiddle。

來源

2013-01-22 16:51:27 jevakallio

骨幹視圖el作爲表列

回答

相關問題