Ember.js нужна помощь в обработчике коллекции для простого примера Todo

Question

Я новичок в 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: печать сценарий списка задач пунктов

<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> 

Так что проблема

Im показывая все добавляемые Todos как ниже

TODO - [todoName]

, но не правильно напечатал todoName

поэтому им не удалось определить, в чем ошибка, которую я сделал здесь.

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

Благодаря

Answer 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/> 

Как вы видите, я также предлагаю до используйте контекстЗапись для вашего вида. Вы всегда должны использовать свойство содержимого для контроллеров, тогда как Мнения всегда должны использовать свойство контекста. Это более удручающий способ сделать это. Как вы видите, в этом случае вам не нужно указывать префикс перед вашим трактом атрибута ({{title}} вместо {{context.title}}). Этот подход делает просмотр более многоразовым, так как если он будет работать и при использовании с контроллерами.

Answer 2

Просто измените ваш шаблон:

<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