0

私はEmber.jsを初めて使用します。これまで、Ember.jsで簡単な例を試していましたが、この例に固執しています。

ここに、作成したTodoの例を貼り付けます。

JS：-

    App = Ember.Application.create();

    App.ApplicationController = Ember.Controller.extend({
     });

     App.ApplicationView = Ember.View.extend({
       templateName:"appTemp"
     });

    App.Todo = Ember.Object.extend({
      title:null
    });

     App.TodoController =Ember.ArrayProxy.create({
       content: [],
      addItem: function(title){
            var todo = App.Todo.create({title: title})  ;
            this.pushObject(todo);
           }
     });

      App.TodoController.addItem("hello");
      App.TodoController.addItem("world");

    App.TodoAddView = Ember.View.extend({
       createTodo: function(name){
         App.TodoController.addItem(document.getElementById("todoName").value);
     }
   });

   App.TodoView = Ember.View.extend();

   App.TodosListView = Ember.CollectionView.extend({
     itemViewClass: Ember.View.extend({
    })
   });

HTML：ToDoアイテムスクリプトの印刷

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#collection App.TodosListView contentBinding = "App.TodoController" }}
  {{#view App.TodoView contentBinding="content"}}
  <label>TODO - {{content.title}}</label>
  {{/view}}
  {{/collection}}
</script>

だから問題は

以下のように追加されたすべてのTodoを表示しています

TODO-[todoName]

しかし、todoNameが正しく印刷されていません

だから私は特定することができません、私がここで犯した間違いは何ですか。

   <label>TODO - {{content.title}}</label>

ありがとう

4

2 に答える 2

1

テンプレートを次のように変更するだけです。

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#collection App.TodosListView contentBinding="App.TodoController"}}
    {{#view App.TodoView}}
      <label>TODO - {{title}}</label>
    {{/view}}
  {{/collection}}
</script>

http://jsbin.com/iriwow/1/editを参照してください

于 2013-03-19T08:56:01.997 に答える
1

CollectionViewを使用する正当な理由はありますか？{{#each}}ヘルパー（より読みやすいimho）を使用する方が簡単な場合があります。したがって、代替案：

各ヘルパーとインラインテンプレートの使用：

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#each todo in App.TodoController }}
  {{#view App.TodoView contextBinding="todo"}}
   <label>TODO - {{title}}</label>
  {{/view}}
  {{/each}}
</script>

インラインテンプレートなしで各ヘルパーを使用する：

<script type="text/x-handlebars" data-template-name="appTemp">
  {{#each todo in App.TodoController }}
  {{view App.TodoView contextBinding="todo"}}
  {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="todoView">
  <label>TODO - {{title}}</label>
</script/>

ご覧のとおり、ビューにcontextBindingを使用することも提案しています。コントローラには常にcontentプロパティを使用する必要がありますが、 Viewsは常にcontextプロパティを使用する必要があります。これは、それを行うためのより厄介な方法です。この場合に見られるように、属性パスの前にプレフィックスを指定する必要はありません（{{context.title}}の代わりに{{title}}）。このアプローチにより、ビューはより再利用可能になります。これは、コントローラーで使用した場合にも機能するためです。

于 2013-03-19T09:05:45.637 に答える