0

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

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

正如您从jsfiddle中看到的那样，父模型：App.Person被加载到 DOM 中，并且它还为其 hasMany 属性加载了 3 个占位符belts。

然后它执行请求以填充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/哈佛商学院：

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

4

1 回答 1

0

检查 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')
});
于 2013-01-24T23:33:50.063 回答