更改模型的值属性 emberjs

Question

我正在尝试在 Emberjs 中为一些动态加载的数据实现切换效果。这是我的适配器：

export default Ember.Object.extend({
    findAll: function(){
        return ajax('http://localhost:8000/api/v1/address-book/companies?includes=details')
            .then(function(response){
                return response.data.map(function(c){
                    return {
                        name: c.name,
                        website: c.details.data.website_url,
                        dev_website: c.details.data.development_website_url,
                        showDetails: false
                    };
                });
            });
    }
});

这是 HTML 把手：

{{#each m in model}}
    <tr>
        <td >
            <p style="cursor:pointer; color:#009688" {{ action 'displayDetails' m}}>{{m.name}}</p>
            {{#if m.showDetails}}
                <div class="">
                    <p><strong>Wesbite URL: </strong><a href="{{m.website}}">{{m.website}}</a></p>
                    <p><strong>Development Wesbite URL: </strong><a href="{{m.dev_website}}">{{m.dev_website}}</a></p>
                </div>
            {{/if}} 
        </td>
    </tr>
{{/each}}

这是控制器：

export default Ember.ArrayController.extend({
    searchText: null,

    actions: {
        displayDetails: function(item){
            item.toggleProperty('showDetails')
        }
    }
});

我也在我的控制器中尝试过这个：

export default Ember.ArrayController.extend({
    searchText: null,

    actions: {
        displayDetails: function(item){
            item.showDetails = true;
        }
    }
});

这给了我一个错误，我必须使用 Ember.set 来更改属性节目的值，然后我这样做了：

export default Ember.ArrayController.extend({
    searchText: null,

    actions: {
        displayDetails: function(item){
            item.set('showDetails', true);
        }
    }
});

但这给了我错误 item.set is not a function

现在我尝试在每次单击公司名称（p 标签）时将模型 showDetails 属性从 true 切换为 false。我知道我对控制器本身的属性做了什么，但我如何在我的模型对象中实现它？

Answer 1

您需要：

1) 一个物品控制器（即将弃用）
- 查看 'needs' api 控制器
2) 可以设置属性的组件。

您不能为带有数组控制器的单个对象设置模型属性。

如果你有一个恒等式映射，你可以这样做：

actions: {
  actionName: function() {
    this.store.find('modelName', someID).toggleProperty('propertyName')
  }
}

Answer 2

您是否尝试过使用消息中所说的 Ember.set()？

Ember.set(m, 'showDetails', true);

http://emberjs.com/api/classes/Ember.html#method_set

Answer 3

在您的适配器中，您有 return 如下：

return response.data.map(function(c){
    return {
        name: c.name,
        website: c.details.data.website_url,
        dev_website: c.details.data.development_website_url,
        showDetails: false
    };
});

这意味着您 return 普通 JavaScript 对象数组没有直接在其上实现 #set 方法。 Ember 提供了 Ember.set 可以同时用于 Ember 对象和 JavaScript 对象。更重要的是，它符合 Ember 的绑定机制，这可能是您收到警告的原因。

为了使您的 return 对象在 Ember 环境中更加灵活，考虑将它们包装在 Ember 对象 class 中。这样您就可以直接实现 #set、#get 和 #togglePropert 方法。例如：

return response.data.map(function(c){
    return Ember.Object.create({
        name: c.name,
        website: c.details.data.website_url,
        dev_website: c.details.data.development_website_url,
        showDetails: false
    });
});

More info about Ember.set

More info about #togglePropert

更改模型的值属性 emberjs

changing the value of a model property emberjs

javascript

ember.js

ember-cli

更改模型的值 属性 emberjs

changing the value of a model property emberjs

javascript

ember.js

ember-cli

更改模型的值属性 emberjs