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

我有一個自制的JavaScript，除其他事情，做一些文本格式的工作，以模擬復古基於文本的遊戲：如何使用Ember.js或其他MVC 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>。爲了保持格式的一致性，它還會在每次需要時添加「blanck」跨度。

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

這很簡單，但它的工作很大，直到我不得不動態改變的跨度文本值，而無需每次都重新繪製整個場景。

所以我看了一下互聯網，並意識到Ember.js的存在，它似乎確實是我可以用來改善我的整個代碼。現在

，我嘗試使用Ember.js重新設計它，但我不完全理解但其功能，我遇到了一個問題：

你怎麼代表「基於文本的」視圖進一個Ember.js車把模板？

我在這裏錯過了什麼？我的數據模型包含值和位置在顯示，所以我不完全看到如何handlebars模板可以滿足我的需要。或者動態生成模板是一種選擇？

您認爲如何？我在選擇錯誤的框架還是誤解了它的用法？是我最初的MVC設計是錯誤的嗎？更改完全不同的數據模型不是我可以輕易考慮的選項，因爲它會影響一切。

關於如何使用Ember或其他框架實現這個功能，您有什麼想法嗎？

任何意見可以理解的:)

來源

2012-02-10 Louis

我做了你如何使用燼此上的jsfiddle一個基本的例子。

每一行都是一個對象，我們有一個持有這樣的對象的ArrayProxy。因此，如果我們有10行，我們有10個行對象。

該視圖爲每行對象綁定一個輸出行。

享受飛翔的小鳥：

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

編輯：寧可{{＃如果}}遠空行由ud3323指出：

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

來源

2012-02-10 14:49:56

很好的解決方案馬丁。我改變的唯一兩件事是添加一個if語句到句柄，所以額外的視圖不會被渲染（需要10個創建的Metamorph視圖的數量）並且使用'beginPropertyChanges（）'和'endPropertyChanges（）'，因爲你一次在對象上設置多個屬性。查看我的[更新示例]（http://jsfiddle.net/ud3323/92b24/）。 – 2012-02-10 15:58:15

這是一個很好的解決方案。我非常感謝你在這裏的幫助。你的解決方案和更新將使我能夠進一步研究這個框架，我必須說，這確實使事情變得簡單。 – Louis 2012-02-10 17:41:41

不錯的鳥太btw ^^只有一個問題與IE <9，那裏的鳥繼續飛過整個屏幕和進一步。這似乎與空間字符有關，因此用' '替代它固定了它。任何想法可能導致什麼？ – Louis 2012-02-10 18:01:37

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

回答

相關問題