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

时间:2012-01-11 00:40:22

标签: javascript backbone.js underscore.js

我有一个看起来像这样的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});
} 
});

现在我推出了一个模型,并在其属性中找到了我的收藏:谱号,......,休息。

当它将我的收藏品传递给视图时,我不能!

我做了这个

路由器:

$(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,但我始终无法使用获取访问其属性或将其属性发送到其他视图!渲染也不能被解雇!!!

更新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

ROUTER:

....

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

....

2 个答案:

答案 0 :(得分:1)

这两行完全没有意义:

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

首先你的路由器中有一个init函数,而调用this.init = new Init();会覆盖这个函数,所以当再次调用该路由时,init会再次使用你的函数而不是你的模型了。接下来,您将创建一个没有任何数据的新模型,因此它是空的。比你试图从空模型中“休息”。之后,您填写模型。也许你想要这样的东西:

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

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

编辑1

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

编辑2

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

基本上,他建议您不要通过集合分配,而只需创建复合模型的子模型属性

所以而不是

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();
    .....

  }

我可能早些时候已经提出这个建议,但我不确定这是否是一种常见做法。我仍然不确定我是否喜欢这个建议,因为我很想将休息和分裂模型放在Init的“模型”属性下,而不是直接放在Init下。