更改模型属性emberjs的值

I'm trying to achive a toggle effect in Emberjs for some dynamically loaded data. Here is my adapter:

我试图在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
                    };
                });
            });
    }
});

Here is the HTML handlebars:

这是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}}

and here is the controller:

这是控制器:

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

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

I've also tried this in my controller:

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

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

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

Which gives me the error I must use Ember.set to change the value of a property show then I did this:

这给了我错误我必须使用Ember.set来更改属性显示的值然后我这样做:

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

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

but this gives me the error item.set is not a function

但这给了我错误item.set不是一个函数

Now I'm trying to switch the models showDetails property from true to false every time the company name (p tag) is clicked. I know what I did works with properties of the controller itself but how can I achieve this in my model object?

现在,我每次点击公司名称(p标签)时都试图将模型showDetails属性从true切换为false。我知道我做了什么与控制器本身的属性一起工作,但我怎样才能在我的模型对象中实现这一点?

3 个解决方案

#1

Have you tried using Ember.set() as the message said?

您是否尝试使用Ember.set()作为消息说?

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

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

#2

you need either:

你需要:

1) an item controller (soon to be deprecated)
- looks into the 'needs' api for controllers
2) a component that you can set the property on.

1)项目控制器(即将被弃用) - 查看控制器的'needs'api 2)可以设置属性的组件。

You cannot set a model property for an individual object with an Array Controller.

您无法使用Array Controller为单个对象设置模型属性。

If you had an identity map, you could do something like:

如果您有身份地图,您可以执行以下操作:

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

#3

In your adapter you have return as follows:

在您的适配器中,您返回如下:

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

This means that you return array of plain JavaScript objects that does not have implemented #set method directly on them. Ember provides Ember.set that can be used both on Ember objects and JavaScript objects. What is more important, it is compliant with Ember's binding mechanism and probably this is the reason you got a warning.

这意味着您将返回尚未直接在其上实现#set方法的纯JavaScript对象数组。 Ember提供了Ember.set,可以在Ember对象和JavaScript对象上使用。更重要的是,它符合Ember的绑定机制,可能这就是你收到警告的原因。

To make your return objects more flexible in Ember environments consider wrapping them in Ember Object class. This way you would have straightly implemented #set, #get and #togglePropert method. As an example:

要在Ember环境中使返回对象更加灵活,请考虑将它们包装在Ember Object类中。这样你就可以直接实现#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

有关更多信息Ember.set

More info about #togglePropert

有关#togglePropert的更多信息

#1