Question

我正在使用backbone.js。我得到一个像这样的json：

{
    first_name: 'David',
    last_name: 'Smith',
    family: [{father: 'David', mother: 'Rose', brother: 'Max'}]
}

first_name和last_name通过PersonView（扩展Backbone.View）以及我想在DetailsView中显示的族数据显示。

所以，我这样做了。第一：

personView = new PersonView(model: person)//person it's the json above

PersonView显示效果很好。然后我想将模型传递给DetailsView：

detailsView = new DetailsView(model: JSON.parse(person.get('family'));

好吧，当我尝试将模型传递给DetailsView实现中的模板时，如下所示：

DetailsView = Backbone.View.extend({
    className: 'tab-pane',
    template: _.template($('#detail-tpl').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
});

我收到此消息：

未捕获的TypeError：对象[object Object]没有方法'toJSON'

我不知道如何获得或通过模型来解决这个问题。

我正在尝试几种方法，但我无法实现。

希望你能帮助我。

Answer 1

我认为问题在于这条线。

model: JSON.parse(person.get('family')

它希望model成为骨干模型的实例。但我认为这不是这种情况。尝试为家庭定义模型或以其他方式更改密钥的名称

而是尝试这种方法

familyMembers : JSON.parse(person.get('family')

在您的视图中，您可以将其作为

进行访问

(this.options.familyMembers.toJSON())

Answer 2

问题是你传入的模型只是一个数组。因此没有.toJSON方法。由于grant建议您在创建视图时可以使用新的Backbone.Model，但我建议您为该系列使用一个集合和2个新视图。它看起来像这样。

    var PersonModel = Backbone.Model.extend({
     initialize: function(attributes, options) {
      if(attributes.family) {
       this.family = new FamilyCollection(attributes.family, options);
      }
     }
    });

    var FamilyCollection = Backbone.Collection.extend({
     model: FamilyMember,
     initialize: function(models, options) {
      this.view = new FamilyView(options);
     }
    });

    var FamilyMember = Backbone.Model.extend({
     initialize: function(attributes, options) {
      this.view = new DetailedView({
       model: this


    });
     }
});

然后你会使用像这样的视图结构..

<div class="person">
 <span class="name-first">David</span> <span class="name-last">Smith</span>
 <div class="family-members>
  <div class="family-member">
    <span class="name-first">Rose</span> <span class="name-last">Smith</span>
  </div>
  <div class="family-member">
    <span class="name-first">David</span> <span class="name-last">Smith</span>
  </div>
  <div class="family-member">
    <span class="name-first">Max</span> <span class="name-last">Smith</span>
  </div>
 </div>
</div>

Answer 3

“family”属性是一个数组，您可以执行以下操作之一...

var familyArray = model.get('family');
new DetailsView({model: new Backbone.Model(familyArray[0])});

...或者向人物模型中添加一个getFamily函数......

var PersonModel = Backbone.Model.extend({
    getFamily: function() {
        var familyArray = this.get('family');
        return new Backbone.Model(familyArray[0]);
    }
});

...

new DetailsView({model: person.getFamily()});

JSON项目到Backbone模型

3 个答案: