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

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

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

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

行动

用户点击div

触发userSelect操作，并且在控制器中isSelected设置为true。这将更新模板并附加 将“selected”标记添加到类属性，从而生成要删除的div 更新

问题：

我想为模型中的每个用户添加一个display属性isSelected，而不仅仅是像我现在所做的那样添加到模型中。可能吗

目前，按照其实现方式，“selected”标记仅在isSelected=false时显示。在呈现模板后，要么反转逻辑，要么将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

这里的问题是

isSelected

属性位于

App.UserListController

上，它表示的是列表，而不是每个用户。您的想法是正确的—使用控制器装饰模型对象—但要做到这一点，您需要为每个用户提供一个控制器实例。这就是为什么

请查看这篇博客文章，了解一个很好的解释：

---

这里的问题是

isSelected

属性位于

App.UserListController

上，它代表的是列表，而不是每个用户。您的想法是正确的—使用控制器装饰模型对象—但要做到这一点，您需要为每个用户提供一个控制器实例。这就是为什么

请查看这篇博客文章，了解一个很好的解释：

---

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

我们可以在array controller中为单个对象设置属性

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

看看这个。

---

也请查看此

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

我们可以在array controller中为单个对象设置属性

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

---

它应该可以正常工作。

这不是我想要走的路线，因为isSelected不是真正的服务器数据，而是更多的显示数据。谢谢你！它不是服务器数据。如果要将属性指定为服务器数据，可以设置DS.attr（'string'）或Ember.attr（'string'）。它是这样设计的，以区分服务器和显示数据。这种方法可以工作，但不推荐，isSelected属性真正属于控制器而不是模型。理解为什么是微妙但重要的-虽然每个用户只有一个模型对象，但可能有许多控制器。该用户对象可能出现在一些列表中、搜索结果中、编辑页面上等等。如果您将应用程序状态属性（如isSelected）放在模型上，它们将溢出并导致非常难以调试的问题。这不是我想要走的路线，因为isSelected不是真正的服务器数据，而是更多的显示数据。谢谢你！它不是服务器数据。如果要将属性指定为服务器数据，可以设置DS.attr（'string'）或Ember.attr（'string'）。它是这样设计的，以区分服务器和显示数据。这种方法可以工作，但不推荐，isSelected属性真正属于控制器而不是模型。理解为什么是微妙但重要的-虽然每个用户只有一个模型对象，但可能有许多控制器。该用户对象可能会出现在一些列表中、搜索结果中、编辑页面上等。如果您将应用程序状态属性（如isSelected）放在模型上，它们将溢出并导致非常难以调试的问题。我实际上尝试了这种方法，但将其应用于仅与模型关联的控制器时遇到了问题。我将稍后发布这个示例。我实际上尝试过这种方法，但是在将其应用于仅与模型关联的控制器时遇到了问题。我将在稍后发布示例。