如何對Meteor中的輸入單元格表格進行反應式綁定？

我正在嘗試創建一個web應用程序來處理任意大小的數字的二維矩形表。每個表格將成爲一個文檔（將存儲在一個集合中，並由用戶彼此共享）。最後，我想擴展到任意數量的維度，但2D已經給我帶來了麻煩。目前，我的數據存儲爲如何對Meteor中的輸入單元格表格進行反應式綁定？

{dimensions: [2,3], 
data: [2, 3, 5, 7, 11, 13]}

，但我認爲這將是更容易編寫UI代碼爲陣列

[[2, 3, 5], 
[7, 11, 13]]

的數組，很容易足以讓我在其他地方進行這種轉變。

我一直致力於玩具實現，將我的頭部纏繞在反應部件周圍，而不會增加Collections和用戶帳戶的複雜性。硬編碼的2x3版本是在https://github.com/scentoni/meteor-grid和https://github.com/scentoni/meteor-grid/tree/loopcell雙{{#each}}循環的版本，其中關鍵的一點是

<table> 
    <tbody> 
    {{#each rows}} 
    <tr> 
     {{#each cols}} 
     <td><input class="cell" name="{{../row}},{{col}}" type="text" value="{{stuff ../row col}}"/></td> 
     {{/each}} 
    </tr> 
    {{/each}} 
    </tbody> 
</table>

和

var iota = function (n) {return Array.apply(null, {length: n}).map(Number.call, Number); } 

Template.page.rows = function() { 
    return iota(Session.get('numrows')).map(function (x) {return {row: x};}); 
}; 

Template.page.cols = function() { 
    return iota(Session.get('numcols')).map(function (x) {return {col: x};}); 
}; 

Template.page.stuff = function (i, j) { 
    return Session.get('data')[i][j]; 
};

這似乎是工作，但我覺得我」誤用這些工具。任何人都可以爲我提供一些指導嗎？

來源

2013-04-29 Scott Centoni

我做

有專門關於使用會話什麼一些德巴，有些相似（在流星移動kindof一個spreatsheet）我記得流星代碼：使用會話在這種情況下，由於轉換造成的開銷從/到JSON

我建議：

通過使用DEPS處理兩個暗淡陣列（具有一個接口創建一個對象使反應性陣列：添加/刪除行/列，獲取/設置單元） Docs：http://docs.meteor.com/#deps_dependency - 你也可以使用一個集合，如果它適合專業人士JECT。

當前模板系統遇到的一個問題是，您必須在子模板中分割東西。你的代碼所做的是在被動數據失效時完全重新渲染 - 如果一個單元格改變了整個事物的渲染。嘗試分裂它像：

{{each row}} 
    {{>viewRow}} 
{{/each}} 

<template name="viewRow"> 
    <tr> 
    {{each cell}} 
    {{>viewCell}} 
    {{/each}} 
    </tr> 
</template> 

...

我在流星取得了debuggin模板的片段：https://gist.github.com/raix/5598923 這將sumup模板呈現給一些統計數據，它幫助MED結構我的方式模板，只有改變的數據被重新描繪。

我可能會在某天包裹一個spreatsheet包，

來源

2013-06-14 21:56:22 RaiX

如何對Meteor中的輸入單元格表格進行反應式綁定？

回答

相關問題