Emberjs - 修改数组

时间:2014-06-17 11:08:49

标签: ember.js

我对Ember有一些问题,我真的不明白。我有一个像这样的数组:

var device.images = [
    0: {
        url: "url",
        key: "key"
    },
    1: "url2",
    2: "url3",
    3: "url4"
];'

在我的控制器中,在地图中我尝试修改数组中的每个项目:

device.images[idx] = image;

image是一个新对象,看起来像我的数组的第一项。但我总是认为断言失败了:

Assertion Failed: You must use Ember.set() to access this property (of [object Object]...

我该如何解决?因为那通常不起作用吗?

[edit]以下是完整的代码:

loadGallery: function( device ) {

        var that = this;
        var images = device.images.map( function( item, idx ) {
            return new Ember.RSVP.Promise(function( resolve ) {
                if ( item.url ) {
                    resolve( item );
                }
                else {
                    resolve( that.imageStore.readImage( that, item ) );
                }
            })
            .then( function( image ) {
                device.images.set( idx, image );
                that.set( 'selectedItem.images', device.images );
                return image;
            });
        });
        return Ember.RSVP.Promise.all( images );
    },

1 个答案:

答案 0 :(得分:1)

[编辑:第一次尝试错了]

您似乎应该可以使用item[index] = value构造。用法示例:

App.IndexRoute = Ember.Route.extend({
  resolveImage: function (that, item) {
    return {
      url: item,
      key: "resolved"
    };
  },
  model: function() {
    var device = {
      images: [
        {url: "a", key: "existing"},
        "b",
        "c"
      ]
    };
    var that = this;
    var images = device.images.map(function(item, idx) {
      return new Ember.RSVP.Promise(function(resolve) {
        if (item.url) {
          resolve(item);
        }
        else {
          resolve(that.resolveImage(that, item));
        }
      })
      .then(function(image) {
        device.images[idx] = image;
        return image;
      });
    });
    return Ember.RSVP.hash({
      model: Ember.RSVP.Promise.all(images),
      device: device
    });
  },
  setupController: function (c, m) {
    c.set("model", m.model);
    c.set("device", m.device);
  }
});
  <script type="text/x-handlebars" data-template-name="index">
  <h2>From model</h2>
  <ul>
    {{#each item in model}}
      <li>{{item.url}} - {{item.key}}</li>
    {{/each}}
  </ul>
  <h2>From device</h2>
  <ul>
    {{#each item in device.images}}
      <li>{{item.url}} - {{item.key}}</li>
    {{/each}}
  </ul>
  </script>

JSBin here

除了代码中其他地方的一些错误之外,唯一剩下的解决方案就是您正在使用Ember.Dataimages实际上并不是一个数组,而是一个只实现一个或几个的自定义类Ember的数组/可枚举的mixins。 [...]构造是一种语法糖,它被硬编码到javascript中,并且库作者无法覆盖它。

我无法帮助你,因为我没有使用Ember.Data。您可以尝试使用Ember.MutableArray接口中的显式数组变异方法。例如:

device.images.replace(idx, 1, [image]);

或者,使用object.set(key, value)构造(我的第一个建议),但需要注意的是键值必须是字符串。例如:

device.images.set(String(idx), image);

如果这些都不起作用,您可以尝试构建一个新数组,而不是替换现有数组的成员。