您如何使用Ember.js或其他MVC javascript框架設計基於文本的視圖？

Question

我有一個自制的javascript，除其他外，它可以做某種文本格式的工作來模仿一個復古的基於文本的游戲：

在開發它時，我試圖堅持一個MVC模型，這就是我所做的：

數據模型基本上由一個對象列表組成，這些對象將字符串映射到顯示器中非常特定的位置，像這樣

[{
 "value":"Hello!",
 "color":"blue",
 "row":1,
 "column":13
},
{
 "value":"What is your quest ?",
 "color":"red",
 "row":5,
 "column":10
},

/* ... some other data */]

然后，我的視圖包含一個簡單的<pre>標簽。 當我的控制器在視圖上繪制模型時，它將遍歷每個字符串位置對，並為每個附加到<pre>標記的對創建一個<span> 。 為了保持格式一致，每次需要時，它還會添加“空白”跨度。

<pre>
  <span>             </span><span class="blue">Hello!</span><span>          </span><br>
  <!-- ... other lines of the scene-->
</pre>

這很簡單，但是在我不得不動態更改span文本值之前，它一直很好用，而不必每次都重新繪制整個場景。

所以我看了一下互聯網，意識到Ember.js存在，這確實是我可以用來改進整個代碼的功能。

現在，我嘗試使用Ember.js重新設計它，但是由於我還不完全了解它的功能，因此遇到了一個問題：

您如何在Ember.js車把模板中表示“基於文本”的視圖？

我在這里想念什么？ 我的數據模型包含顯示中的值 和 位置 ，因此我不完全了解把手模板如何滿足我的需求。 還是動態生成模板是一種選擇？

你怎么看 ？ 我是在選擇錯誤的框架還是誤解其用途？ 是我原來的MVC設計錯了嗎？ 更改數據模型以實現完全不同的選擇不是我可以輕易考慮的選擇，因為這會影響所有內容。

您對如何使用Ember或其他框架實施此方法有任何想法嗎？

任何建議將被認真考慮 ：）

Answer 1

我在jsfiddle上做了一個基本示例，說明如何使用余燼。

每行都是一個對象，並且我們有一個ArrayProxy此類對象的ArrayProxy 。 因此，如果我們有10行，我們就有10行對象。

該視圖將每行對象綁定一條輸出線。

享受會飛的鳥：

http://jsfiddle.net/algesten/YMrW3/2/

編輯：最好{{#if}}刪除ud3323指出的空行：

http://jsfiddle.net/ud3323/92b24/