0

私がやろうとしていることは非常に基本的なことですが、運がほとんどありません...

簡単に言えば、特定の Ember Data モデル プロパティが完全に読み込まれるまで、HTML のチャンクを表示したくありません。

jsfiddleからわかるように、親モデル:App.Personが DOM に読み込まれ、 hasMany プロパティの 3 つのプレースホルダーも読み込まれますbelts。

次に、リクエストを実行してデータを入力App.Beltし、プレースホルダーに入力します。

これは通常は問題ありませんが、たとえば SVG を構築しようとすると、大きな混乱が生じます。周囲の<svg>タグはすぐに DOM に追加され、しばらくしてから (非同期リクエストがデータを返すと)、svgタグの間に内部コンポーネントが追加されます。これにより、通常、ブラウザのレンダリング エラーが発生します。

TL;DR例では、モデル データとその関係 ( ) が完全に読み込まれるまで、テンプレートのセクションが DOM に追加され
ないようにするにはどうすればよいですか? このようにして、すべてが一度に視覚的および物理的に DOM に追加されます。<h3>...</h3>belts

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/

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 に答える