如何將jQuery Justified Gallery包裝在Ember組件中？

我試圖將插件Justified Gallery包裝在Ember組件中。我面臨的主要問題是，圖庫中的照片列表來自API，因此它們是模型的一部分。我至今：如何將jQuery Justified Gallery包裝在Ember組件中？

App.JustifiedGalleryComponent = Ember.Component.extend({ 
    _init: function() { 
     this.$().justifiedGallery({ 
      rowHeight: 150, 
      fixedHeight: false, 
      margins: 7 
     }); 
    }.on('didInsertElement') 
});

模板

{{#each photo in items}} 
    <div> 
    <img src={{photo.thumbUrl}} /> 
    </div> 
{{/each}}

但我不能得到那個工作，可能是因爲照片的清單是每個循環中，並在應用插件照片仍然不在DOM中？這個問題的方法是什麼？

謝謝！

編輯：

以作爲參考砌體構件我有了這個幾乎排序，但我第一次瀏覽到URL沒有任何顯示，如果我去第二路由（餘燼內應用程序），並返回到畫廊，然後顯示罰款和合理。這是我現在的組件：

import Ember from 'ember'; 

var getOptions = function (keys) { 
    var properties = this.getProperties(keys); 

    Object.keys(properties).forEach(function (key) { 
    if (properties[key] === "null") { 
     properties[key] = null; 
    } 

    if (properties[key] === undefined) { 
     delete properties[key]; 
    } 
    }); 

    return properties; 
}; 

export default Ember.Component.extend({ 
    classNames: ['justified-grid'], 

    options: null, 
    items: null, 

    setup: Ember.on('didInsertElement', function() { 
    this.set('options', getOptions.call(this, [ 
     'rowHeight', 
     'fixedHeight', 
     'margins' 
    ])); 

    this.justifyGrid(); 
    }), 


    justifyGrid: Ember.observer('[email protected]', function() { 
    var _this = this; 

    imagesLoaded(this.$(), function() { 
     _this.$().justifiedGallery(_this.get('options')); 
     _this.set('gridInitialized', true); 
    }); 
    }) 
});

來源

2015-04-29 Pedro Alonso

問題不在組件中。這是我的模型使用異步（Ember Data）加載照片。出於這個原因，在路由器中，設置模型後，我不得不強制Ember數據加載我的照片：

afterModel: function(model) { 
    return Em.RSVP.all([model.get('photos')]); 
}

來源

2015-04-29 18:36:45

如何將jQuery Justified Gallery包裝在Ember組件中？

回答

相關問題