【问题标题】:Backbone Relational - Deep nested models/collectionsBackbone Relational - 深层嵌套模型/集合
【发布时间】:2017-03-19 06:17:21
【问题描述】:

Backbone-relational.js v0.10.0 玩得开心

我有一个包含嵌套模型和集合的 JSON 对象,为了简单起见,我制作了下面的示例。一家公司可以有很多员工,员工可以有一个地址和许多任务。

{
    name: 'Nicks Company',
    employees: [{
        name: 'Bob',
        address: {
            line1: '1 City Lane',
            city: 'London'
        },
        tasks: [{
            description: 'Make this work'
        }]
    }, {
        name: 'Bill',
        address: {
            line1: '1 The Street',
            city: 'Birmingham'
        },
        tasks: [{
            description: 'Make a cake'
        }, {
            description: 'Fix all the things'
        }]
    }]
}

在下面的 JSFiddle(控制台)中,您可以看到地址是一个普通对象,并且由于 tasks 以数组形式返回,因此注释掉的任务代码也已被禁用。

JSFiddle:https://jsfiddle.net/nwa29uLv/2/

地址模型或任务集合都不是作为 Backbone 实例创建的,这是可能的还是我在推动这个插件的限制?

【问题讨论】:

标签: javascript backbone.js backbone-relational


【解决方案1】:
  • 这是我解决问题的方法。你错过了 reverseRelation
  • 顺便说一句,你看过这个post 吗?它也有类似的问题。

关注fiddle here

var Address = Backbone.RelationalModel.extend({});

var Task = Backbone.RelationalModel.extend({});
var TaskCollection = Backbone.Collection.extend({
  model: Task
});

var Employee = Backbone.RelationalModel.extend({
  relations: [{
    type: Backbone.HasOne,
    key: 'address',
    relatedModel: Address,
    reverseRelation: {
      type: Backbone.HasOne,
      key: 'employee'
    }
  }, {
    type: Backbone.HasMany,
    key: 'tasks',
    collectionType: TaskCollection,
    relatedModel: Task,
    reverseRelation: {
      type: Backbone.HasOne,
      key: 'operatesOn'
    }
  }]
});

var EmployeeCollection = Backbone.Collection.extend({
  model: Employee
});

var Company = Backbone.RelationalModel.extend({
  relations: [{
    type: Backbone.HasMany,
    key: 'employees',
    relatedModel: Employee,
    reverseRelation: {
      key: 'worksFor'
    }
  }]
});

var company = new Company({
  name: 'Nicks Company',
  employees: [{
    name: 'Bob',
    address: {
      line1: '1 City Lane',
      city: 'London'
    },
    tasks: [{
      description: 'Make this work'
    }]
  }, {
    name: 'Bill',
    address: {
      line1: '1 The Street',
      city: 'Birmingham'
    },
    tasks: [{
      description: 'Make a cake'
    }, {
      description: 'Fix all the things'
    }]
  }]
});

console.log('Company:', company.get('name'));
company.get('employees').each(function(employee) {
  console.log('Employee:', employee.get('name'));
  console.log('Employee:', employee.get('name'), 'Address Model:', employee.get('address').get('city'));
  employee.get('tasks').each(function(task) {
    console.log('Employee:', employee.get('name'), 'Task: ', task.get('description'));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-relational/0.10.0/backbone-relational.js"></script>

【讨论】:

  • 谢谢。我已使 sn-p 可运行。还有一个指向小提琴的链接
  • 太棒了!如果它不能在可运行的 sn-p 中,则指向小提琴的链接很好。但它必须至少附有相关的代码示例。但是,现在它是多余的,因为您使 sn-p 可运行。
  • 非常感谢,一切正常:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多