javascript - Ember.js 和 {{each}}

Question

在我的第一篇帖子得到关于 external scripts 的答复后，我现在遇到了 {{each}} 提取数据的问题。静态选项有效，但每个版本无效。再次欢迎任何帮助...

另外，作为旁注，当渲染每个元素时，我也会得到同样的样式。

请看一下 jsfiddle(虽然 https://github.com/ed-lea/jquery-collagePlus 不包括在内，所以在当前状态下无法工作...)，欢迎任何帮助...

HTML

<script type="text/x-handlebars">
    <div class="container">{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="index">
    <h3>By Ember each</h3>

    <h4>Each</h4>
    {{#view App.GridView}}
            {{#each}}
                    <img src="{{unbound src}}"/>
            {{/each}}
    {{/view}}

    <h4>Static</h4>
    {{#view App.GridView2}}
            <img src="http://placehold.it/350x150/69D2E7/ffffff"/>
            <img src="http://placehold.it/320x180/A7DBD8/ffffff"/>
            <img src="http://placehold.it/320x300/E0E4CC/ffffff"/>
            <img src="http://placehold.it/472x500/F38630/ffffff"/>
            <img src="http://placehold.it/540x360/FA6900/ffffff"/>
            <img src="http://placehold.it/800x600/ECD078/ffffff"/>
            <img src="http://placehold.it/400x120/D95B43/ffffff"/>
            <img src="http://placehold.it/300x300/C02942/ffffff"/>
            <img src="http://placehold.it/320x500/542437/ffffff"/>
            <img src="http://placehold.it/450x300/53777A/ffffff"/>      
    {{/view}}
</script>

JS

App = Ember.Application.create();

App.Router.map(function() {

});

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return Videos;
    }
});



App.GridView = Ember.View.extend({

    classNames: ['Collage'],

 didInsertElement: function(){
    this._super();
        this.$().removeWhitespace().collagePlus();
        //this.$().collagePlus();
    }
});

App.GridView2 = Ember.View.extend({

    classNames: ['Collage'],

 didInsertElement: function(){
        this.$().removeWhitespace().collagePlus();
        //this.$().collagePlus();
    }
});

数据

var Videos = [
{
    id: 1,
    title: 'name',
    src: 'http://placehold.it/350x150/69D2E7/ffffff'
},
{
    id: 2,
    title: 'name',
    src: 'http://placehold.it/320x180/A7DBD8/ffffff'
},
{
    id: 3,
    title: 'name',
    src: 'http://placehold.it/320x300/E0E4CC/ffffff'
},
{
    id: 4,
    title: 'name',
    src: 'http://placehold.it/472x500/F38630/ffffff'
},
{
    id: 5,
    title: 'name',
    src: 'http://placehold.it/540x360/FA6900/ffffff'
},
{
    id: 6,
    title: 'name',
    src: 'http://placehold.it/800x600/ECD078/ffffff'
},
{
    id: 7,
    title: 'name',
    src: 'http://placehold.it/400x120/D95B43/ffffff'
},
{
    id: 8,
    title: 'name',
    src: 'http://placehold.it/300x300/C02942/ffffff'
},
{
    id: 9,
    title: 'name',
    src: 'http://placehold.it/320x500/542437/ffffff'
},
{
    id: 10,
    title: 'name',
    src: 'http://placehold.it/450x300/53777A/ffffff'
},

];

http://jsfiddle.net/jimboroberts/p9MLV/

Answer 1

试试这个:

didInsertElement: function(){
  Ember.run.scheduleOnce('afterRender', this, function () {
    this.$().removeWhitespace().collagePlus();
  });
});