繁体   English   中英

Ember.js和{{each}}

[英]Ember.js and {{each}}

在就外部脚本回答了我的第一篇文章之后,我现在遇到了{{each}}提取数据的问题。static选项有效,但每个版本都无效。 再次对此欢迎有任何帮助...

另外要注意的是,当每个渲染时,我也会得到样式。

请看一下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/

尝试这个:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM