javascript - 从嵌套 Backbone.js 模型访问属性时出现问题

Question

我有一个如下所示的 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});
} 
});

现在我拿出了一个模型并将其属性放入我的收藏中:谱号，...，休止符。

当需要将我的 Collection 传递给 View 时，我却做不到!

这是我做的

路由器:

$(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");
  }
});

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

我想要的是从模型名称的“首字母”中提取我的收藏!! this.initial.attributes 返回一个对象，其中包含我的集合!但我无法将它们传递给 View !

更新1:

现在模型已传递到 View ，但我始终无法使用get访问他的属性或将他的属性发送到其他 View !渲染器也无法被触发!!!

更新 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});

....

Answer 1

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 新手，所以我仍在学习处理复合模型的最佳方法。我之前所做的是让一个 View 跟踪两个模型(因为它显示了一个列表列表，但在任何给定时间只有一个子列表可见)。每当单击第一个列表中的某个项目时，就会选择包含子列表的模型，并从该模型中“获取”字段 toJSON() (这是一个非常不幸的名称，因为它不是 JSON 字符串，而是对象表示形式) )，然后重置绑定(bind)到 View 的模型以显示当前子列表。如果没有代码，这有点难以解释，但我现在的时间有点短。稍后我可能会尝试更好地解释(也许有另一个答案)。

编辑 1

澄清一下，我反对通过 set 进行分配然后通过get检索。我只是不确定 Backbone.js 将如何处理这个问题。不过我很想知道。

编辑2

您可能想查看: backbone.js structuring nested views and models

基本上，他建议不要通过 set 进行分配，而只需创建复合模型的子模型属性

所以而不是

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 */

}

然后，如果您想在路由器中绑定(bind)特定 View ，假设您已经定义了 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();
    .....

  }

我可能早些时候就建议过这一点，但我不确定这是否是一种常见做法。我仍然不确定我是否喜欢这个建议，因为我很想将其余和裂口模型放在 Init 的“模型”属性下。而不是直接在Init下。