0

Backbone.js を使用しており、fetch() を使用してモデルにデータを入力しようとしています。私が抱えている問題は、返されたデータがモデルに取り込まれていないことです。ここで同様の質問を見つけました。違いは、成功関数内ではデータの変更が見られず、「変更」イベントが発生していないことです。

コード：

モデル

window.Company = Backbone.Model.extend({
    urlRoot: "/api/company",
    defaults:{
        "id":null,
        "name":"",
        "address":"",
        "city":"",
        "state":"",
        "phone":""
    },
    events: {
        'change': 'doChange'
    },

    doChange: function(event) {
        alert('company changed');
    }
})

ルーター

var AppRouter = Backbone.Router.extend({

    routes:{
        "":"home",
        "company/:id":"companyDetails"
    },

    initialize:function () {
        var user = new User();
        this.headerView = new HeaderView({
            model: user
        });
        $('.header').html(this.headerView.el);
        console.log("router initialized.");
    },

    companyDetails: function (id) {
        var company = new Company({
            id: id
        });
        company.fetch({
            success: function(){
                console.log('company.id is ' + company.id);
                console.log('company.name is ' + company.name);
                console.log('company.address is ' + company.address);
                $("#content").html(new CompanyView({
                    model: company
                }).el);
            }
        });
}


});

JSON

{"address":"555 Main St","name":"Confused Technologies","id":"8dc206cc-1524-4623-a6cd-97c185a76392","state":"CO","city":"Denver","zip":"80206","phone":"5551212"}

名前と住所は常に未定義です。私は単純なものを見落としている必要がありますか？

編集

モデルをテンプレートに渡すことを誤って省略したビューを含めます。

意見

window.CompanyView = Backbone.View.extend({

    initialize:function () {
        this.render();
        console.log('CompanyView initialized');
    },

    render:function (eventName) {
        $(this.el).html(this.template());
        return this;
    }

})
4

2 に答える 2

3

属性はモデルに直接保存されません。それらは属性 hashに格納されているため、 を介してアクセスしますがcompany.attributes、company.get(attribute)通常はこれが行われます。同じようcompany.toJSON()に、モデルの属性の複製されたハッシュを返すため、テンプレート関数に渡します。

change: doChange変更イベントが発生しないということは、モデルのイベント ハッシュのことだと思います。バックボーン モデルは、実際にはイベント ハッシュに対して何も行いません。これは、バックボーン ビューで DOM イベントを委任するためのものです。company.on("change", function (model) { console.log(model.toJSON()); })fetch 呼び出しの前に置き、成功のコールバックを削除すると、コンソールにモデルが表示されるはずです。

$("#content").html...また、あなたのラインが期待どおりに機能するとは思いません。ルーターのコールバックを次のように書き直します。

companyDetails: function (id) {
  var company = new CompanyView({
    el: "#content", 
    model: new Company({ id: id })
  });

  // This line would be better in your view's initialize, replacing company with this.
  company.listenTo(company.model, "change", company.render);

  company.model.fetch();
}

CompanyView#render は通常this.model.toJSON()、html を返すテンプレート関数に渡し、それを に渡しthis.$el.html()ます。だから何かthis.$el.html(this.template(this.model.toJSON()));

于 2013-03-21T02:44:14.243 に答える