Question

我对EmberJS很新。我试图渲染一个简单的hasMany模型。

我的应用程序应该为多人处理多个任务。

首先，我有模特：

App.Task = Em.Object.extend({
    name: null
});
App.Person = Em.Object.extend({
    firstname: null,
    lastname: null,
    avatar: null,
    tasks:null,
});

一个人可以有多个任务。所以我的personController就是这样的：

App.personsController = Em.ArrayController.create({
    content: [],
    tasks:[],
    addPerson: function(){
        var aPerson = App.Person.create({
            firstname: this.firstname,
            lastname : this.lastname,
            avatar : this.avatar,
        });
        this.pushObject( aPerson );  
    }

我的任务控制器，将处理任务工作：

App.tasksController = Em.ArrayController.create({
    content:[],
    contentBinding: "App.personsController.tasks",
    name:'',
    removeTask: function(e){
        this.removeObject( e.context );
    },
    addTask: function(e){
        this.pushObject( App.Task.create({"name":this.name}) );
    }
});

contentBiding似乎是这里的关键之一。我希望它能自动绑定到我正在处理的人的任务上。

在视图方面，只需处理我的Handlebars模板：

<script type="text/x-handlebars">
  {{view Em.TextField valueBinding="App.personsController.firstname" placeholder="firstname" }}
  {{view Em.TextField valueBinding="App.personsController.lastname" placeholder="lastname" }}
  <button {{action "addPerson" target="App.personsController"}} class="btn btn-primary"  >Ajouter un developpeur</button>
    {{#each App.personsController}}
      <div>
        <h3>{{firstname}}{{lastname}}</h3>
      {{view Em.TextField valueBinding="App.tasksController.name"}} 
        <button {{action "addTask" target="App.tasksController"}}  >Add a task</button>
        {{#each App.tasksController}}
          {{view Em.TextField valueBinding="name" }}
          <button {{action "removeTask" target="App.tasksController"}}  >x</button>
        {{/each}}
      </div>
    {{/each}}
</script>

所以，当我添加一个新人时，一切正常。但是，如果我添加任务，则会在视图中的每个人的任务中添加任务。

我担心我犯了一个概念上的错误，我找不到关于这种可视化的好文档。我已经看到了与ember.data的hasMany关系的例子，但我想首先正确理解这里发生了什么。

Answer 1

您的addTask函数会在App.tasksController内维护的数组中添加新任务，但这些任务与App.Person.tasks的任何实例都没有任何约束。

我建议创建新的View类，其中包含对tasksController和单 App.Person实例的绑定。此视图的personBinding将设置在外部{{#each}}循环内。让此视图负责为单个人呈现App.Person.tasks。

更改控制器中的addTask以接受对App.Person的引用作为参数，然后将该任务显式添加到该函数体中该人的tasks数组。

渲染多个模型，每个模型包含Ember Js中的多个对象

1 个答案: