Emberjs - 逐個渲染畫廊圖像

我的問題有點奇怪，因爲我不明白這是如何工作的。我有一個項目顯示在我的網頁上，當用戶點擊一個，這將觸發一個動作事件，也將收到被點擊的產品（對象）。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); 
    },

我在這裏做什麼，就是我替換每個URL的陣列device.images內由OBJET是這樣的：{ 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>

這裏是readImage功能：

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(); 
      }); 
     }); 
    };

來源

2014-06-17 SuperMarco

是這條線基本上是什麼都不做，但？它是否將財產設置爲現在的狀態？。我要猜測是的 – Kingpin2k

好吧，如果它工作正常，我應該能夠在我的模板中看到結果。所以，我認爲這沒有做任何事情。是的，它將屬性設置爲已有內容，如更新，修改對象內的數組。 – SuperMarco

實際上這條線，'device.images.set（idx +''，image）;'，或任何正在觀看每個圖像，是問題。你能展示你的模板嗎？或計算屬性是依賴於它？ – Kingpin2k

灰燼忽略集相同的值（陣列，相同的參考的對象）的。

它在你的承諾中起作用的原因是它創造了一個新的陣列，Ember認爲它是不同的。

這也看起來像你試圖索引設置集合中的項目。儘管正常（某些隱藏的黑色灰燼的魔法我從來沒有見過），它不能正確通知灰燼該項目已經改變，例如http://emberjs.jsbin.com/cevimara/1/edit

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

你可以嘗試切換到替換（http://emberjs.com/api/classes/Ember.ArrayProxy.html#method_replace）

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

例子：http://emberjs.jsbin.com/cevimara/1/edit

來源

2014-06-17 14:28:26 Kingpin2k

我應該在我的地圖中創建一個新的數組，填充它，並在每個圖像加載後設置'selectedItem'？ – SuperMarco

我找到了另一種方法來做到這一點：'that.set（'selectedItem.images。'+ idx，image）;'但是第一次點擊時它不工作，你必須點擊其他產品，再次點擊前一個圖像加載圖像。？！？ – SuperMarco

嘗試使用替換而不是數組上的設置。 – Kingpin2k

Emberjs - 逐個渲染畫廊圖像

回答

相關問題