preload数据:预加载关系
preload数据:预加载关系
提问于 2013-01-24 23:13:09
我想做的是非常基本的，但我运气很差.
简单地说，在完全加载某个Ember数据模型属性之前，我不想显示一个HTML块。
从小提琴中可以看到，父模型：App.Person被加载到DOM中，它还为其hasMany属性belts加载了3个占位符。
然后执行填充App.Belt的请求并填充占位符。
虽然这通常是可以的，但例如，在尝试构建SVG时，它会造成很大的混乱。因为周围的<svg>标记将被立即附加到DOM中，然后沿着轨道前进一段时间(一旦异步请求返回数据)，将在标记之间添加内部svg组件。这通常会创建浏览器呈现错误。
TL；博士
在本例中，如何将模板的<h3>...</h3>部分从添加到DOM 推迟到完全加载模型数据及其关系(belts)的？这样，所有的东西都可以同时在视觉上和物理上添加到DOM中。
The JS:
// Create Ember App
App = Ember.Application.create();
// Create Ember Data Store
App.store = DS.Store.create({
revision: 11,
//Exagerate latency to demonstrate problem with relationships being loaded sequentially.
adapter: DS.FixtureAdapter.create({latency: 5000})
});
// Create parent model with hasMany relationship
App.Person = DS.Model.extend({
name: DS.attr( 'string' ),
belts: DS.hasMany( 'App.Belt' )
});
// Create child model with belongsTo relationship
App.Belt = DS.Model.extend({
type: DS.attr( 'string' ),
parent: DS.belongsTo( 'App.Person' )
});
// Add Parent fixtures
App.Person.FIXTURES = [{
"id" : 1,
"name" : "Trevor",
"belts" : [1, 2, 3]
}];
// Add Child fixtures
App.Belt.FIXTURES = [{
"id" : 1,
"type" : "leather"
}, {
"id" : 2,
"type" : "rock"
}, {
"id" : 3,
"type" : "party-time"
}];
// Set route behaviour
App.IndexRoute = Ember.Route.extend({
model: function() {
return App.Person.find();
},
renderTemplate: function() {
this.render('people');
}
});/HBS：
<script type="text/x-handlebars">
<h1>Application</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="people">
<h3>Don't load this header until every belt defined in App.Person.belts is loaded</h3>
<ul>
{{#each controller}}
{{debugger}}
<li>Id: {{id}}</li>
<li>Name: {{name}}</li>
<li>Belt types:
<ul>
{{#each belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>小提琴： http://jsfiddle.net/zfkNp/4/
回答 1
Stack Overflow用户
发布于 2013-01-24 23:33:50
检查controller.content.length和belts.isLoaded，请参阅小提琴以获得解决方案。
<script type="text/x-handlebars" id="people">
{{#if controller.ready}}
<h3>Don't load this header until every belt defined in App.Person.belts is loaded</h3>
{{/if}}
<ul>
{{#each controller}}
{{debugger}}
{{#if belts.isLoaded}}
<li>Id: {{id}}</li>
<li>Name: {{name}}</li>
<li>Belt types:
<ul>
{{#each belts}}
<li>{{type}}</li>
{{/each}}
</ul>
</li>
{{/if}}
{{/each}}
</ul>
</script>
App.IndexController = Ember.ArrayController.extend({
content: null,
ready:function() {
return this.get('content.length')>0
}.property('content.length')
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14512584
复制相关文章
相似问题
腾讯云开发者
