1

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

下面是代码示例。可能有更好的方法来做到这一点，但所以也许我让它变得比它需要的更困难。

当用户单击 div 时，我希望添加一个新的 css 'select' 类，以便它点亮 div。

行动

  1. 用户点击 div
  2. userSelect 动作被触发，并且在控制器中 isSelected 被设置为 true。这将更新模板并将“选定”标签附加到类属性，从而更新 div。

问题：

  1. 我想为模型中的每个用户添加一个显示属性 isSelected 而不仅仅是像我现在所做的那样添加到模型中。那可能吗？
  2. 目前，通过其实现方式，仅当 isSelected = false 时才会显示“选定”标签。要么是逻辑相反，要么 isSelected 绑定到新值的顺序发生在模板渲染之后。

用户.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",

 }
]

用户列表控制器.js

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

        this.set('isSelected', true);

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

索引.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

4

3 回答 3

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);
    }
});

它应该可以正常工作。

于 2013-09-07T21:39:11.543 回答
0

这里的问题是isSelected属性是 on App.UserListController，它代表列表而不是每个单独的用户。您有正确的想法 - 使用控制器来装饰模型对象 - 但要完成这项工作，您需要为每个用户创建一个控制器实例。这就是{{each}} 助手的 itemController 属性的用途。

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

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

于 2013-09-07T08:03:35.260 回答
0

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

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

<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

于 2013-09-07T19:03:22.140 回答