1

我正在使用 ember.js RC1 + ember-data rev 11（但我还需要一些普通的 ajax 来进行模型等配置）。我想遍历一个简单的对象列表并显示记录（注意 - 这里我只创建一个基本数组）

我绑定的内容定义了如下自定义查找方法

App.Foo = DS.Model.extend({
    name: DS.attr('string')
}).reopenClass({
    records: [],
    all: function() {
        return this.records;
    },
    find: function() {                                                              
        var self = this;
        $.getJSON('/api/foo/', function(response) {
            response.forEach(function(data) {
              //say I want to kill everything in the array here for some strange reason...
              self.records = [];
              //the template still shows the record ... not an empty list ?
            }, this);
        });
        return this.records;
    }
});

我的另一个模型直接使用这个

App.Related = DS.Model.extend({
  listings: function() {
    return App.Foo.find();
  }.property()
});

现在在我的模板中

{{#each foo in related.listings}}
  {{foo.name}}<br />
{{/each}}

默认情况下，列表会加载我放入数组中的任何内容（比如我使用 createRecord 添加一个简单的对象，就像这样）

add: function(record) {
    this.records.addObject(App.Foo.createRecord(record));
},

当模板被渲染时，我看到这里列出的任何内容......但正如我在上面的评论中所说，如果我决定删除记录或将绑定的列表清空，它似乎并没有以任何方式反映这一点。

是否可以像我一样绑定一个简单的数组，然后使用诸如拼接之类的基本方法从中删除项目？甚至是激烈的 self.records = []; ?

self.records.splice(i, 1);

即使我在拼接或清空工作后手动查询客户端，它也会返回 0

console.log(App.Foo.all().get('length'));

最初我看到记录，但后来我看到它们不见了（但 html 没有改变）

4

2 回答 2

2

我以这种方式理解了您的问题，以下评论是您正在努力解决的问题：

  response.forEach(function(data) {
          //say I want to kill everything in the array here for some strange reason...
          self.records = [];
          //the template still shows the record ... not an empty list ?
        }, this);

您想知道，为什么您的模板没有显示空列表？这是因为您没有告诉 Ember 何时更新模板。你可以这样告诉 Ember：

App.Related = DS.Model.extend({
  listings: function() {
    return App.Foo.find();
  }.property("App.Foo.records.@each")
});

现在 Ember 知道，无论何时从数组中添加或删除某些内容，它都应该更新模型的列表属性。因此它知道您的视图需要重新渲染。

关于“简单的javascript数组”的原始问题的补充说明。使用 Ember 时，实际上并没有实例化简单的 js 数组。当您声明：

var a = []; // is the same as -> var a = Ember.A();

Ember 做了一些神奇的事情并包装在一个增强的 ember 版本的数组 (Ember.NativeArray) 中，这使您能够使用上面提到的此类属性依赖声明。这使得 Ember 可以在这些数组上使用 ArrayObservers，尽管它们可能感觉就像一个普通的 JS 数组。

于 2013-03-04T10:31:36.910 回答
1

您需要set在修改属性和get返回属性时使用该方法，否则 Ember 将无法发挥其魔力并更新模板。

在您的情况下，还有一个额外的问题，即 in ，您在异步调用将其替换为新的空数组之前find()返回一个引用。调用方法永远不会看到新的记录数组。您可能想改用。recordsgetJSONclear()

您的模型应如下所示：

App.Foo = DS.Model.extend({
    name: DS.attr('string')
}).reopenClass({
    records: [],
    all: function() {
        // can't use 'this.get(...)' within a class method
        return Ember.get(this, 'records');
    },
    findAll: function() {
        var records = Ember.get(this, 'records');
        $.getJSON('/api/foo/', function(response) {
            records.clear();

            // in this case my json has a 'foos' root 
            response.foos.forEach(function(json) {
                this.add(json);
            }, this);
        }, this);

        // this gets updated asynchronously
        return records;
    },
    add: function(json) {
        // in order to access the store within a 
        // class method, I cached it at App.store
        var store = App.get('store');
        store.load(App.Foo, json);

        var records = Ember.get(this, 'records');
        records.addObject(App.Foo.find(json.id));
    }
});

请注意，该addObject()方法尊重观察者，因此模板按预期更新。removeObject()是删除元素的相应绑定感知方法。

这是一个工作的jsfiddle。

于 2013-03-04T07:06:26.340 回答