如何在动态子属性更改时更新Ember计算属性

时间:2014-03-04 17:46:26

标签: javascript ember.js

我无法使用Ember Data,因为我们的数据模型有点复杂(例如,并非所有内容都有id),我不喜欢缓存和其他一些事情;但是,我确实喜欢它的模型有状态标志(isNew,isDeleting),所以我试图实现一些功能。

基本要点是,无论何时从服务器检索模型,该数据都存储在_data对象中。每当用户然后更改某个值的值时,该值就存储在_attributes对象中。通过比较两者,我可以看出模型是否脏。属性是使用app.attr方法定义的。

app.Person = app.Model.extend({
  "id": app.attr("number"),
  "name": app.attr("string"),
  "age": app.attr("number")
});

attr函数与ember数据非常相似。

function getValue(record, key, options) {
    var attrs = get(record, "_attributes"),
        data = get(record, "_data");
    if ( attrs.hasOwnProperty(key) ) {
        return attrs[key];
    } else if ( data.hasOwnProperty(key) ) {
        return data[key];
    } else if ( typeof options.defaultValue === "function" ) {
        return options.defaultValue();
    }
    return options.defaultValue; // may be undefined
}

app.attr = function(type, options) {
    options = options || {};
    var meta = {
        "type": type,
        "isAttribute": true,
        "options": options
    };
    return function(key, value) {
        if ( arguments.length > 1 ) {
            if ( key === "id" ) {
                console.error("id is readonly on "+this.constructor.toString());
            } else {
                if ( get(this, "_data."+key) === value ) {
                    delete get(this, "_attributes")[key]; // not sure if this really works? seems to from my testing. set(this, "_attributes."+key, undefined) literally set undefined, which did not work
                } else {
                    set(this, "_attributes."+key, value);
                }
            }
        }
        return getValue(this, key, options);
    }.property("_data").meta(meta);
};

然后在我的模型上,我有一些像isNew和isDirty的标志。将isDirty作为计算属性是有意义的,但只要任何属性发生变化,它就需要更新。我想也许.property(“_ attributes。*”)会这样做,但事实并非如此。我很难过。我试着让它变得不稳定..这可以确保我在明确要求时获得正确的值,但是当底层属性发生变化时模板不会更新。

对于我上面的模型,做.property(“id”,“name”,“age”)是合适的,但那些模型的模型不同。我能够在模型的init中获取当前模型的属性,但是我找不到一种方法可以动态地更改它们。

这是我的模特:

app.Model = Ember.Object.extend({
    "_attributes": null,
    "_data": null,

    "isDeleted": false,
    "isNew": false,
    "isSaving": false,

    "isDirty": function() {
        var attrs = get(this, "_attributes");
        for ( k in attrs ) {
            if ( attrs.hasOwnProperty(k) ) {
                return true;
            }
        }
        return false;
    }.property("_attributes").readOnly(), // NOTE: not quite right

    "init": function() {
        this._super();
        set(this, "_data", {});
        set(this, "_attributes", {});

        var attrs = [];
        this.constructor.eachAttribute(function(name, meta) {
            attrs.push(name);
        });
        // NOTE: Can I do anything to attach all the attrs to isDirty here?
    }
});

app.Model.reopenClass({
    "attributes": Ember.computed(function() {
        var map = Ember.Map.create();
        this.eachComputedProperty(function(name, meta) {
            if ( meta.isAttribute ) {
                meta.name = name;
                map.set(name, meta);
            }
        });
        return map;
    }),
    "eachAttribute": function(callback, binding) {
        get(this, "attributes").forEach(function(name, meta) {
            callback.apply(binding, arguments);
        }, binding);
    }
});

我使用代码和我的测试创建了一个jsFiddle:http://jsfiddle.net/2uCn3/3/

所以我知道如何在属性发生变化时更新isDirty进行更新? 相似(如在jsFiddle中可以看到的),如果直接更改了_data.someProperty,attr仍然会返回旧的默认值,所以我也对它进行了测试......但它基本上是同样的问题。

我考虑使用像_attributesChanged这样的计数器并使用incrementProperty,但它似乎不可靠并且看起来很糟糕。

我还考虑过将_attributes和_data转换成数组,然后@each可能会有用。

希望有一个更清洁的方法。我还在试图弄清楚ember数据是如何做到的。

更新:如果你直接操作_data.property,我发现Ember Data也会出错,我提出了一个解决方法,但GJK的解决方案无限好。

1 个答案:

答案 0 :(得分:3)

我也为Ember编写了自己的持久层,我解决它的方法是每次更改this.notifyPropertyChange('_attributes')对象时调用_attributes。我看不到你的所有代码,但如果你将_attributes限制为只有几个mutator方法,那么你只需要在3或4个位置调用它。然后,对于您的计算属性,您可以依赖于_attributes属性。

在您的代码中,只需在attr函数内的两个位置调用它即可。 (假设这是修改_attributes内容的唯一方法。)

 if ( get(this, "_data."+key) === value ) {
    delete get(this, "_attributes")[key];
    this.notifyPropertyChange('_attributes');
 } else {
    set(this, "_attributes."+key, value);
    this.notifyPropertyChange('_attributes');
 }