0

我对 EmberJS 很陌生。我正在尝试渲染一个简单的 hasMany 建模。

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

首先，我有模型：

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

一个人可以有多项任务。所以我的personsController 是这样工作的：

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>

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

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

4

1 回答 1

0

您的addTask函数将一个新任务添加到维护的数组中App.tasksController，但没有任何东西将这些任务绑定到App.Person.tasks.

我建议创建View一个绑定到您tasksController和单个 App.Person实例的新类。此视图的 personBinding 将设置在您的外部{{#each}}循环内。让这个视图负责为App.Person.tasks一个人渲染。

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

于 2012-07-10T22:29:59.503 回答