Question

根据我的理解，控制器用于装饰数据或添加不属于模型（服务器）的任何数据。但是，我试图了解如何将显示数据添加到模型数据中，以便我可以传递给ember.js中的模板

以下是代码示例。可能有一种更好的方法可以做到这一点，但也许我会让它变得更加困难。

当用户点击div时，我想要添加一个新的css'select'类，以便点亮div。

操作

用户点击div
触发userSelect操作，并在控制器中将isSelected设置为true。这将更新模板并附加 'selected'标签到class属性，导致div成为更新。

的问题：

我想为模型中的每个用户添加一个显示属性isSelected，而不仅仅是我正在做的模型。那可能吗？
目前，通过其实现方式，仅当isSelected = false时才会显示“selected”标记。在呈现模板之后，逻辑被反转或者isSelected正在被绑定到新值的顺序。

user.js的

App.User = DS.Model.extend({
    firstName:     DS.attr('string'),
    lastName:      DS.attr('string')
});

App.User.FIXTURES = 
[
 {
   id:          1,
   firstName:   'Derek',
   lastName:    "H",

 },
 {
   id:          2,
   firstName:   'Test',
   lastName:    "H",

 }
]

UserListController.js

App.UserListController = Ember.ArrayController.extend({
    isSelected: false,
    userSelect: function(userId){

        this.set('isSelected', true);

        console.debug(userId + " isSelected:" + this.get('isSelected'));
    }
});

的index.html

<script type="text/x-handlebars" id="userList" data-template-name="userList">
   {{#each controller}}  
        <div {{bindAttr class="isSelected:selected:notselected"}} {{action userSelect id}}>
         </div>
   {{/each}}
</script>

我意识到我可以操纵DOM并附加类，但我想知道正确的方法，你可以专门为ember做这件事。

任何建议表示赞赏，谢谢 d

Answer 1

向模型添加属性是可以的。

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),

    isSelected: false
});

你的路线应该是这样的：

App.UserRoute = Ember.Route.extend({
    model: function() { return App.User.find(); }
});

所以，我修改了你的模板：

 {{#each model}}  
    <div {{bindAttr class="isSelected:selected:notselected"}} 
         {{action 'userSelect' this}}>
    </div>
 {{/each}}

控制器：

App.UserController = Ember.ArrayController.extend({
    userSelect: function(user){
       user.set('isSelected', true);
    }
});

它应该可以正常工作。

Answer 2

这里的问题是isSelected属性在App.UserListController上，它代表的是不是每个用户的列表。你有正确的想法 - 使用控制器来装饰模型对象 - 但要使这项工作，你需要为每个用户提供一个控制器实例。这就是{{each}} helper's itemController property的用途。

查看此博客文章以获得更好的解释：

http://gaslight.co/blog/intermediate-ember-controller-concepts

Answer 3

我希望我能很好地理解你的问题。

我们可以在数组控制器中为各个对象设置属性。

<script type="text/x-handlebars" id="userList" data-template-name="userList">
   {{#each controller}} 
       {{#if selected}}
           div {{bindAttr class="selected"}}></div>
       {{else}}
        <div {{bindAttr class="notselected"}} {{action userSelect this}}>
         </div>
      {{/if}}
   {{/each}}
</script>

操作用户选择

App.UserListController=Em.ArrayController.extend({
  userSelect:function(ob){
    this.map(function(o,i){
      Em.set(o,"selected",false);
      if(ob.id===o.id)
        Em.set(ob,"selected",true);
    });
  }
});

查看此Bin。查看此Bin也是

将显示数据添加到控制器ember.js的模型中

3 个答案: