Ember.js Emberjs-逐个渲染库图像

我的问题有点奇怪，因为我不明白这怎么行得通。 我的页面上显示了一个项目列表，当用户单击其中一个项目时，这将触发一个操作事件，该事件还将接收被单击的产品对象

触发操作处理程序后，我将调用loadGallery（请参见下文），它通常会在我的模板中逐个呈现我的图像。 SelectedItem是我的控制器的属性

   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 ) {
                var imageURLs = device.imageURLs.slice( 0, device.imageURLs.length );
            imageURLs[idx] = image.url;
            //that.set('selectedItem.imageURLs.'+idx, image.url );
            that.set('selectedItem.imageURLs', imageURLs );
            that.set('selectedItem.images.' + idx, image );
            return image;
            });
        });
        return Ember.RSVP.Promise.all( images );
    },

我在这里做的是，我用如下对象替换数组device.images中的每个URL：{key:'someKey'，URL:'URL'}

但是我的模板在到达那里时不会刷新

我设法使其工作的唯一方法是等待所有图像加载完毕并刷新属性，如下所示：

return Ember.RSVP.Promise.all( images ).then(function(imgs){
            that.set('selectedItem.images', imgs);
        });

为什么这是工作，但不是一个接一个的图像

[编辑]这是我的模板：

<div class="gallery">
    {{#each img in selectedItem.images}}
        {{#if img.url}}
            <div href="{{unbound img.url}}" class="gallery-item" style="background-image: url({{unbound img.url}})"></div>
        {{else}}
            <div class="gallery-item" style="background-image: url(images/loading.png)"></div>
        {{/if}}
    {{/each}}
</div>

---

余烬忽略具有相同值数组的集合、具有相同引用的对象

它之所以在你的承诺中起作用，是因为它创建了一个新的数组，而Ember认为这是不同的

这看起来也像是您正在尝试为集合中的项设置索引。尽管这个功能正常运行，但我从未见过的灰烬的一些隐藏的黑魔法并没有正确地通知灰烬该物品已经更改，例如

您可以尝试切换到替换

---

示例：

但这行实际上什么也没做吗？它是否将属性设置为它已经存在的状态。我猜yesWell，如果它起作用，我应该能够在我的模板中看到结果。所以，我认为这是没有做任何事情。是的，它正在将属性设置为它已经存在的状态，就像更新一样，修改我的对象中的数组。实际上是这一行，device.images.set idx+，image；，或者是看每一张图片的任何东西，都是问题所在。你能展示你的模板吗？或者依赖于它的计算属性？我已经将模板添加到了主帖子中，但是当用户单击带有{each}的对象列表中的一个产品时，设备就是我从模板中获得的对象。你能显示该项的作用吗？我应该在我的地图中创建一个新数组，填充它，在每次加载图像后设置selectedItem？我发现了另一种方法：设置'selectedItem.images'。+idx，image；但是，当你第一次点击它时，它就不起作用了，你必须点击另一个产品，然后再次点击上一个产品，才能加载图像？！？尝试在阵列上使用“替换”而不是“设置”。不幸的是，它不起作用。。但这是。设置“selectedItem.images”。+idx，image；他工作了一半。当我选择product1时，它不会加载库，我选择product2时也会遇到同样的问题，但当我再次选择product1时，它会工作。我不明白…我已经编辑了loadGallery功能，我没有必要使用设备.images.set。。因为我可以用对象替换数组中的每一项。但它仍然只有在我选择两次产品后才会显示。。我已经与ember调试器进行了检查，我的selectedItem.images数组似乎正确地填充了对象，但没有显示在模板上。

  this.readImage = function( controller, key ) {
        var that = this;
        return new Ember.RSVP.Promise(function( resolve ) {
            controller.store.findQuery( 'image', { key: key })
            .then(function( image ) {
                var result = undefined;
                var content = image.content[0];
                var data = content && content._data;
                if( data ) {
                    if ( iOSVersion()[0] >= 7 || isBlobSupported() ) {
                        result = {
                            key: key,
                            url: dataURIToURL( data.base64, key )
                        }
                    } else {
                        result = {
                            key: key,
                            url: data.base64
                        }

                    }
                }
                resolve( result );
            })
            .catch(function( e ) {
                console.log( e );
                resolve();
            });
        });
    };

device.images.set( idx+'', image );

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