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>を作成します。フォーマットの一貫性を保つため、必要になるたびに「blanck」スパンを追加します。

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

これはかなり簡単ですが、毎回シーン全体を再描画せずに、スパンテキストの値を動的に変更するまではうまく機能しました。

だから私は本当に私は私の全体のコードを改善するために使用することができます正確に何であると思われる、インターネット上で見ていたし、Ember.jsが存在していたことに気づきました。

さて、私はEmber.jsを使用して、それを再設計しようとしましたが、私はまだ完全にその機能を理解していないとして、私はこの問題に遭遇した：

あなたがに「テキストベースの見解を表すにはどうすればよいですEmber.jsハンドルバーテンプレート？

私はここで何をしないのですか？ 私のデータモデルはの値がとのの表示がであるため、ハンドルバーのテンプレートが私のニーズにどのように適合するかは正確には分かりません。あるいは、テンプレートを動的に生成することはオプションですか？

あなたはどう思いますか？ 間違ったフレームワークを選択したり、その使用法を誤解していますか？それは間違っている私の元のMVCデザインですか？データモデルを完全に異なるものに変更することは、すべてに影響を与えるので、私が簡単に検討できるオプションではありません。

は、あなたが、これはエンバーまたはいくつかの他のフレームワークを使用して実装することができる方法上の任意のアイデアを持っていますか？

何かアドバイスが理解されるであろう:)

Answer 1

私はあなたがこのために燃えさしを使用することができますどのようにjsfiddleに初歩的な例を作りました。

各行はオブジェクトであり、我々はArrayProxy保持するようなオブジェクトを持っています。したがって、10行ある場合、10行のオブジェクトがあります。

ビューは、行オブジェクトごとに一つの出力ラインに結合されています。ud3323で指摘したようにより良い{{#ifの}}を離れて空の行：：

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

編集：

は飛ぶ鳥をお楽しみください

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