骨干 - 嵌套类加载

我有一只狗，它有一个品种与它相关联。现在，我只有一种叫做DogView的视图。我正在重新实现Dog中的解析方法，正如此StackOverflow问题中指定的那样 - >Nested Models in Backbone.js, how to approach 骨干 - 嵌套类加载

但是，我遇到了问题。首先，我注意到，除非我明确地调用response [key] .fetch，否则[key]似乎不会被加载。其次，该观点不被重新渲染。我相信这是因为Backbone的文档声称它应该改变事件不会被取消。

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

来源

2013-06-24 Kyle Richter

有人吗？另外，如果您有任何其他问题或任何问题以获得帮助，请让我知道。 –

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

来源

2013-06-24 13:36:40

骨干 - 嵌套类加载

回答

相关问题