4

ビューのパラメーターとしてモデルを渡そうとしています。オブジェクトをビューに表示していますが、その属性にアクセスする方法がありません...コードは次のとおりです。

ルーターから：

var Product = new ProductModel({id: id});
Product.fetch();
var product_view = new ProductView({el: $("#main-content"), model: Product});

モデルから：

var ProductModel = Backbone.Model.extend({
urlRoot: 'http://192.168.1.200:8080/store/rest/product/'
});

ビューから：

ProductView = Backbone.View.extend({
    initialize: function(){
        console.log(this.model);
        this.render();
    },
    render: function(){
        var options = {
            id: this.model.id,
            name: this.model.get('name'),
            publication_start_date: this.model.get('publication_start_date'),
            publication_end_date: this.model.get('publication_end_date'),
            description: this.model.get('description'),
            applis_more: this.model.get('applis_more')
        }
        var element = this.$el;
        var that = this;
        $.get('templates/product.html', function(data){
            var template = _.template(data, options);
            element.html(template);
        });
    }
});

「console.log」の結果は次のとおりです。

child {attributes: Object, _escapedAttributes: Object, cid: "c1", changed: Object, _silent: Object…}
Competences: child
Editor: child
Hobbies: child
Opinions: child
_changing: false
_escapedAttributes: Object
_pending: Object
_previousAttributes: Object
_silent: Object
attributes: Object
createdDate: null
deletedDate: null
descriptionId: 0
galleryImage: null
id: 13
image: null
manufacturerId: 0
name: "sdf"
owner: 0
status: 0
thumbnail: null
titleId: 0
type: 1
uid: "fdsf"
updatedDate: null
__proto__: Object
changed: Object
cid: "c1"
id: 13
__proto__: ctor

私の見解では、私のすべてのオプションは「未定義」です（名前、日付、...）

私が間違っていることについて何か考えはありますか？

4

3 に答える 3

6

初期モデルを作成したら、すぐにを使用してビューを作成します

var product_view = new ProductView({..., model: Product});

のinitializeメソッドではProductView、を呼び出しています。this.render()これは、モデルから値を読み取り、レンダリングします。これらの値のほとんどはundefined（サーバーにモデルの値を送り返すのに十分な時間がなかったため）です。
直接呼び出すthis.render()のではなく、イベントをバインドします。例：

// in ProductView::initialize
this.model.on('sync', function() {
    this.render();
}, this);

changeモデルへのローカル（まだ同期されていない）変更もビューに反映されるように、イベントをバインドすることもできます。（バックボーンイベントの概要はここにあります。）

于 2012-12-17T14:53:40.080 に答える
2

Product.fetch（）は非同期で発生するため、サーバーからデータを取得したら、ビューを作成する必要があります。

var Product = new ProductModel({id: id});
var product_view;
Product.fetch().done(function() {
    product_view = new ProductView({el: $("#main-content"), model: Product});
});
于 2012-12-19T20:34:10.843 に答える
1

Product.fetch（）は非同期呼び出しであるため、ビューを初期化したときにフェッチがまだ完了していないと思います。おそらくやりたいことは、fetchのsuccess + errorコールバックを使用して、何かをレンダリングする前にモデルにデータが含まれていることを確認することです。

http://backbonejs.org/#Model-fetch

于 2012-12-17T14:53:22.123 に答える