Question

我想做的事情非常基本，但我的运气很少......

简单地说，在完全加载某个Ember Data模型属性之前，我不想显示一大块HTML。

从jsfiddle可以看出，父模型：App.Person被加载到DOM中，它还为其hasMany属性belts加载3个占位符。

然后执行填充App.Belt的请求并填写占位符。

虽然这通常没问题，但是在尝试构建SVG时会出现很多问题。由于周围的<svg>标记将立即附加到DOM，然后一段时间沿着轨道（一旦异步请求返回数据），内部svg组件将添加到标记之间。这通常会产生浏览器渲染错误。

TL; DR
在该示例中，如何将模板的<h3>...</h3>部分推迟添加到DOM 直到模型数据及其关系（belts）完全加载？这样，一切都可以在视觉上和物理上一次性地添加到DOM中。

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');
  }
});

HTML / 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/

Answer 1

检查controller.content.length和belts.isLoaded，有关解决方案，请参阅jsfiddle。

<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')
});

Ember数据：预加载关系

1 个答案: