Question

我有一只狗，它有一个与之相关的品种。现在，我只有一个名为DogView的视图。我正在Dog中重新实现parse方法，正如StackOverflow问题中所指定的那样 - ＆gt; Nested Models in Backbone.js, how to approach

但是，我遇到了问题。首先，我注意到响应[key]似乎没有加载，除非我明确地调用响应[key] .fetch。其次，视图没有被重新渲染。我相信这是因为更改事件没有被提取，因为Backbone的文档声称应该这样做。

我已将视图设置为this.listen到模型，并在捕获事件时调用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"
    }
});

Answer 1

没关系，我修好了。该事件只是注册到错误的模型对象。我在DogView上将我的事件注册到“this.model”，但更改的标志是在this.model.get（'breed'）上设置的。因此，通过设置this.listenTo（this.model.get（'breed'），'change'，this.render（）），它就像一个魅力。：）

Backbone - 嵌套类加载

1 个答案: