ember.js - 如何正确设置在 Web 应用程序中充当单个指针的商店

Question

我有一个有简单identityMap 的本土商店。当我从中返回一组模型并将其绑定(bind)到 Controller “模型”时，它反射(reflect)了您的期望

the first time you hit a route it reflects this in the template as you'd expect

但后来如果我得到这个相同的商店实例(它是一个单例)并将一个对象推送到 identityMap 它不会自动更新以前的模板

商店本身是 super 基本的(没有关系/只是推送对象并通过 id 获取)

function buildRecord(type, data, store) {
    var containerKey = 'model:' + type;
    var factory = store.container.lookupFactory(containerKey);

    var record = factory.create(data);

    var id = data.id;
    identityMapForType(type, store)[id] = record;

    return record;
}

function identityMapForType(type, store) {
    var typeIdentityMap = store.get('identityMap');

    var idIdentityMap = typeIdentityMap[type] || {};
    typeIdentityMap[type] = idIdentityMap;

    return idIdentityMap;
}

var Store = Ember.Object.extend({
    init: function() {
        this.set('identityMap', {});
    },

    push: function(type, data) {
        var record = this.getById(type, data.id);
        if (record) {
            record.setProperties(data);
        } else {
            record = buildRecord(type, data, this);
        }
        return record;
    },

    getById: function(type, id) {
        var identityMap = identityMapForType(type, this);
        return identityMap[id] || null;
    }

    getEverything: function(type) {
        var identityMap = identityMapForType(type, this);
        var keys = Object.keys(identityMap);
        var values = [];
        for (var i = 0; i < keys.length; i++)
        {
            var val = identityMap[keys[i]];
            values.push(val);
        }
        return values;
    }
});

Ember.onLoad('Ember.Application', function(Application) {
    Application.initializer({
        name: "store",
        initialize: function(container, application) {
            application.register('store:main', Store);
            application.inject('controller', 'store', 'store:main');
            application.inject('route', 'store', 'store:main');
        }
    });
});

在我的模型钩子(Hook)中(可以说是在查找所有 route )我只需查询每个项目并将它们插入商店

//inside my model find method lets say ...
find: function(store) {
    var url = "/api/foo";
    $.getJSON(url, function(response) {
        response.forEach(function(data) {
            var model = store.push("foo", data);
        }
    }
    return store.getEverything("foo");
}

所以我假设我的 Controller 模型是这个绑定(bind)数组(使用内存中的单个指针来存储这个模型数组)

然而，当我在 Controller 提交操作中执行此操作时，它不会重新呈现该上一个 View (以显示添加到该商店数组中的新项目)

actions: {
    submit: function() {
        var foo = {}; // assume this is a real json response or js object
        var store = this.get("store");
        store.push("foo", foo);
    }
}

因此，今天，我被迫获取父 Controller 并将这个新对象“设置”/“推送”到它的内容/模型属性:(

有人知道我在这里做错了什么吗？

Answer 1

我喜欢本土解决方案，它们通常更易于使用，并且可以与您正在处理的内容融合在一起。
所以我真的很惊讶这部分正在工作:

//inside my model find method lets say ...
find: function(store) {
    var url = "/api/foo";
    $.getJSON(url, function(response) {
        response.forEach(function(data) {
            var model = store.push("foo", data);
        }
    }
    return store.getEverything("foo");
}

如果我通读它，我会看到您进行了 ajax 调用，然后返回 store.getEverything之后立即(不保证 ajax 调用已完成)。然后在 getEverything里面您创建了一个名为 values 的新数组然后迭代连接所有当前可用记录的身份映射并将其返回。在这一点上，您的商店不知道这个数组的 future 。因此，对商店的任何更改都不会被推送到数组中，它们可能会进入身份映射，但它不会提供 getEverything 数组。
有几种解决方案，一种是跟踪您的所有内容。该集合的构建成本将非常低，搜索成本会更高，因此保留身份图也将非常有益。您可以遵循相同的模式，但一个集合将是 map ，而另一个将是所有内容的数组。
修改的构建记录

function buildRecord(type, data, store) {
    var containerKey = 'model:' + type;
    var factory = store.container.lookupFactory(containerKey);

    var record = factory.create(data);

    var id = data.id;
    identityMapForType(type, store)[id] = record;
    everythingArrayForType(type, this).pushObject(record);
    return record;
}

复制粘贴，可能会被重构

function everythingArrayForType(type, store) {
    var everythingArrays = store.get('everythingArrays');
    var arr = everythingArrays[type] || [];
    everythingArrays[type] = arr;

    return arr;
}

稍作修改的商店

var Store = Ember.Object.extend({
    init: function() {
        this.set('identityMap', {});
        this.set('everythingArrays', {});
    },
    push: function(type, data) {
        var record = this.getById(type, data.id);
        if (record) {
            record.setProperties(data);
        } else {
            record = buildRecord(type, data, this);
        }
        return record;
    },

    getById: function(type, id) {
        var identityMap = identityMapForType(type, this);
        return identityMap[id] || null;
    }

    getEverything: function(type) {
        return everythingArrayForType(type, this);
    }
});