[英]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'
},
]。
尝试这个:
didInsertElement: function(){
Ember.run.scheduleOnce('afterRender', this, function () {
this.$().removeWhitespace().collagePlus();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.