backbone.js - バックボーン -- ネストされたクラスのロード

Question

私はそれに関連する品種を持つ犬を飼っています。現在、DogView というビューが 1 つだけあります。この StackOverflow question -> Nested Models in Backbone.js, how to approach で指定されているように、Dog で parse メソッドを再実装しています。

しかし、私は問題に直面しています。まず、response[key].fetch を明示的に呼び出さない限り、response[key] がロードされないように見えることに気付きました。次に、ビューが再レンダリングされていません。バックボーンのドキュメントが主張しているように、フェッチ時に変更イベントが発生していないためだと思います。

ビューをモデルに this.listenTo まで設定し、イベントをキャッチしたら this.render を呼び出します。しかし、出力を見ると、オブジェクトが出力されていないように見えるため、何か間違ったことをしているに違いありません (render メソッドで出力しているため、そうあるべきです)。

backbone.js バージョン 1.0 を使用しています。ご存知のように、私はまだ Backbone の初心者です。では、お気楽にいらしてください。私はたくさんの調査を行い、回答されたこれらの他の質問を調べて、自分でそれを理解しようとしました. 誰かが BackboneRelations について何かを言う前に、私はそれを見てきましたが、基本フレームワークをまだ十分に知らないときに別のフレームワークの学習に飛び込みたいと感じています。:)とにかく、コードは以下です。基本的なことなので全部載せておきます。

// The main view of the application
var App = Backbone.View.extend({

    // Base the view on an existing element
    el: $('#dogs'),

    initialize: function(){
        var dogs = new DogList();

        dogs.fetch({
            success: function(data){
                dogs.each(function(dog){
                    this.list = $('#dogsTempl');
                    var view = new DogView({ model: dog });
                    this.list.append(view.render().el);
                }, this);   // "this" is the context in the callback
            }
        });
    },

    render: function(){
        return this;
    }
});
new App();

--

var Dog = Backbone.Model.extend({
    defaults: {
        "class": "",
        id: 1,
        name: "Enter a name",
        breed: {},
        description: "Enter a description",
        age: "Enter an age",
        profile: null
    },
    urlRoot: "/rest/dog",
    model: {
        breed: Breed,
    },

    parse: function(response){
        for(var key in this.model)
        {
            var embeddedClass = this.model[key];
            var embeddedData = response[key];
            response[key] = new embeddedClass(embeddedData, {parse:true})
            console.log(response[key].toJSON());
            response[key].fetch();
            this.trigger('reset');
        }
        return response;
    }
});

--

var DogList = Backbone.Collection.extend({

        // Will hold objects of the Dog model
        model: Dog,
        url: '/rest/dog/user/'+ $('#userName').html()
});

--

var DogView = Backbone.View.extend({
    tagName: 'div',
    template: _.template($('#dogTemplate' ).html()),

    initialize: function(){
        this.listenTo(this.model, "reset", this.render);
        // Set up event listeners. The change backbone event
        // is raised when a property changes (like the checked field)
        if(!this.constructor.prototype.template) {
            this.constructor.prototype.template = _.template($('#dogTemplate' ).html());
            console.log('compile');
        }
    },
    render: function(){
        console.log(this.model.toJSON())
        // Create the HTML
        this.$el.html(this.template(this.model.toJSON()));

        // Returning the object is a good practice
        // that makes chaining possible
        return this;
    },

    editDog: function(){
        this.model.toggle();
    }
});

--

var Breed = Backbone.Model.extend({
    urlRoot: "/rest/breed",
    defaults: {
        id: null,
        history: "Please enter a history",
        name: "Please enter a name",
        origin: "Please enter a bit about where this breed came from"
    }
});