2

誰かが次のコードをチェックして、モデルからテンプレートに属性を出力できない理由を教えてもらえますか? 私のビューとテンプレートは正しくレンダリングされ、モデルはデータをフェッチし、これは機能するはずです...

テンプレート：

Name should show here --> {{thisItem}}

エラーは表示されず、テキストは表示されますが、表示されません{{thisItem}}。ドキュメントを読むと、これはうまくいくはずです。

モデルがテンプレートに渡されていないと思いますか、それとも [ドット] が必要ですか、つまり {{model.name}} ですか?

私の見解：

define([
    'jquery',
    'underscore',
    'backbone',
    'models/myModel',
    'collections/myModelCollection',
    'hbs!templates/testExampleTemplate.html',
], function ($, _, Backbone, myModel, myModelCollection, testExampleTemplate) {
    var thisView = Backbone.Marionette.ItemView.extend({
        initialize: function (options) {
            this.model.fetch();
        },
        model: new myModel(),
        template: testExampleTemplate,
    });
    return thisView;

});

データがあることを示すモデルの console.log:

    attributes: Object
          thisItem: "Example Item"

モデル：

define([
    'underscore',
    'backbone',
    'jquery'
], function (_, Backbone, jquery) {

    var myModel = Backbone.Model.extend({
        urlRoot: '/myModel'
    });

    return myModel;

});

テンプレート、これが私の作品です：

HTML ベース

レイアウトビューはこれにロードされます

function (Marionette, Handlebars, template, jquery, model) {
    var LayoutView = Backbone.Marionette.Layout.extend({
        template: template,
        regions: {
            holder1: "#holder1"
        }
    });
    return LayoutView;
});

<div id="holder1">I will be replaced</div>

次に、問題のビューが holder1 にロードされます。

4

1 に答える 1

5

これは非同期の問題です。changeレンダリングする前に、モデルのイベントをリッスンする必要があります。

追加してみる

modelEvents: {
    'change': 'render'
}

あなたのビューへ。これにより、ビューがレンダリングされる前にモデルがデータをロードして、データがモデルに表示されるようになります。

ところで、modelEventsこれはマリオネット固有のものであり、バックボーン固有のものではありません。あなたはこれを行うことができます：

var self = this;
this.model.fetch({'success': function() {
    self.render();
});

バックボーンのみに依存する場合は、初期化関数で。

これが機能するのは、モデルがサーバーからデータをすぐにロードしないためです。少し時間がかかりますが、コードは実行され続けます。したがって、データがロードされる前にレンダリングしています。ロードされるまで待つことで、テンプレートがデータとともにレンダリングされることを保証します。ビューは現在それ自体をレンダリングしているため、他のレンダリング呼び出しをどこからでも削除できます。補足として、これにより、データが自動的に変更されるたびに再レンダリングできます。

于 2013-11-14T22:17:10.077 に答える