从嵌套Backbone.js模型访问属性的问题

Problems with Accessing Attributes from a nested Backbone.js Model

本文关键字：属性 问题 访问 模型 嵌套 Backbone js      更新时间：2023-09-26

我有一个JSON文件，如下所示：

JSON:

{
 "clefs": [ 
           {"title": "..", "path": ".."},
           ... , 
           {"title": "..", "path": ".."}
          ],
  ....
 "rests": [ 
           {"title": "..", "path": ".."}, 
           ... , 
           {"title": "..", "path": ".."}
          ]
}

这是一个嵌套的JSON，对吧？因此，我尝试将其转换为嵌套在Backbone.js中的模型/集合，如下所示：

Backbone.js:

window.initModel = Backbone.Model.extend({
  defaults: {
    "title": "",
    "path": ""
  }
});
window.CustomCollection = Backbone.Collection.extend({
  model: initModel
});
window.Init = Backbone.Model.extend({
  url : function(){
  return  "/api/data.json"      
},
parse: function(response) {
  clefs = new CustomCollection();
  clefs.add(response.clefs);        
  this.set({clefs: clefs});
  .....
  rests = new CustomCollection();
  rests.add(response.rests);        
  this.set({rests: rests});
} 
});

现在我推出了一个模型，并将其属性纳入我的收藏：clefs。。。，休息。

当要将我的收藏传递到视图时，我不能！

我做了这个

路由器：

$(document).ready(function() {
  var AppRouter = Backbone.Router.extend({
  routes: {
    ""  : "init"
  },
  init: function(){
    this.initial = new Init();      
    this.initialView = new InitView({model: this.initial});
    this.initial.fetch();
 }
});
var app = new AppRouter();
Backbone.history.start();
});

视图：

window.InitView = Backbone.View.extend({
  initialize : function() {
    this.model.bind("reset", this.render, this);//this.model.attributes send my 4 Collections Models back! But impossible to extract with "get" these Attributes
},
  render : function() {
    console.log("render");
  }
});

现在的情况很糟糕！！我有一个带属性的骨干模型（集合），但我无法提取这些属性，我尝试使用JSON（），get，_.each，_.map，但没有成功！

我想要的是从模型名称的"初始"中提取我的集合！！this.initial.attributes返回一个Object，其中包含我的集合！但我不能把它们传给View

更新1:

现在模型被传递到视图，但我总是无法使用get访问他的属性或将他的属性发送到其他视图！渲染也不能启动！！！

更新2:经过几天的头痛，我下定决心让事情变得简单！

为什么？因为我现在只有4个收藏：谱号、意外、音符和休息

型号：

window.initModel = Backbone.Model.extend({
  defaults: {
   "title": "",
   "path": ""
  }
});
window.ClefsCollection = Backbone.Collection.extend({
  model: initModel,
  url: "/api/data.json",
  parse: function(response){
    return response.clefs;
  }
});
...
and so on

路由器：

....
this.clefsColl = new ClefsCollection();
this.clefsColl.fetch();
this.clefsCollView = new ClefsView({collection: this.clefsColl});
....

init: function(){
  this.initial = new Init();      
  this.initialView = new InitView({model: this.initial});
  this.initial.fetch();
}

看起来和我预期的一样，但这个：

clefs = new CustomCollection();
clefs.add(response.clefs);        
this.set({clefs: clefs});

没那么多。我自己也有点像Backbone.js的新手，所以我仍在学习处理复合模型的最佳方法。我之前所做的是让一个视图跟踪两个模型（因为它显示了一个列表列表，但在任何给定时间都只能查看其中一个子列表）。每当点击第一个列表中的一个项目时，就会选择包含子列表的模型，然后从该模型中"获取"字段，到JSON（）它（这是一个非常不幸的名称，因为它不是JSON字符串，而是对象表示），然后重置绑定到视图的模型，以显示当前子列表。如果没有代码，这有点难以解释，但我现在时间有点短。稍后我可能会尝试更好地解释（也许用另一个答案）。

编辑1

为了澄清，我的反对意见是通过set进行分配，然后通过get进行检索。我只是不确定Backbone.js会如何处理。不过我很想知道。

编辑2

您可能需要查看：backbone.js构建嵌套视图和模型

基本上，他建议，与其通过集合进行分配，不如将复合模型的子模型属性设置为

所以不是

parse: function(response) {
  clefs = new CustomCollection();
  clefs.add(response.clefs);        
  this.set({clefs: clefs});
  .....

你会有

parse: function(response) {
  this.clefs = new CustomCollection();
  this.clefs.add(response.clefs);
     /*Or maybe you really mean this.clefs.reset(response.clefs)*/
  .....  /* something similar for rests, etc */
}

然后，如果你想在路由器中绑定一个特定的视图，假设你已经定义了CleftsView、RestsView等。

  init: function(){
    this.initial = new Init();      
    this.initialView = new InitView({model: this.initial});
    this.clefsView = new ClefsView({model: this.initial.clefs});
    this.restsView = new RestsView({model: this.initial.rests});
    .....
    this.initial.fetch();
    .....
  }

我可能早就提出过这个建议，但我不确定这是否是一种常见的做法。我仍然不确定我是否喜欢这个建议，因为我很想把rest和clefts模型放在Init的"models"属性下，而不是直接放在Init下。

这两行毫无意义：

init: function(){
  this.init = new Init();
  this.initView = new InitView({collection: this.init.get("rests") });
  this.init.fetch();

首先，你在路由器中有一个init函数，而调用this.init = new Init();将覆盖这个函数，所以当再次调用路由时，init不再是你的函数，而是你的Model。接下来，您将创建一个没有任何数据的新模型，因此它是空的。然后你试图从空模型中得到"休息"。然后填充模型。也许你想要这样的东西：

init: function(){
  //create a new model, fetch the data from the server. On success create a new view passing data from the model.
  var init = new Init().fetch({
      success: function(){new InitView({collection: init.get("rests") });}
  });
相关文章：