ember.js - 使用 ember-model 加载数据的正确方法

Question

我试图了解使用 ember-model 侧载数据的正确方法

我让 json 像这样返回(为了空间起见，我将它从实际的 json 缩小了一点)

{
  "classrooms" : [
    {
      "classroom_name" : "Class 1",
      "id" : 1,
      "teacher_id" : 3,
      "grade" : 5,
      "assignments" : [

      ],
      "students" : [
        {
          "id" : 5,
          "last_name" : "Ford",
          "first_name" : "Henry",
          "district_id_number" : "MD454"
        }
      ]
    },
    {
      "classroom_name" : "Class 3",
      "id" : 2,
      "teacher_id" : 3,
      "grade" : 4,
      "assignments" : [
        {
          "id" : 5,
          "assignment_overview" : "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\r\n\r\nNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.",
          "assignment_title" : "Fractions",
          "story" : null
        }
      ],
      "students" : [
        {
          "id" : 5,
          "first_name" : "Henry",
          "last_name" : "Ford",
          "district_id_number" : "MD454"
        },
        {
          "id" : 3,
          "first_name" : "Jake",
          "last_name" : "Strong",
          "district_id_number" : "WH6879"
        },
        {
          "id" : 6,
          "first_name" : "Bryan",
          "last_name" : "Dobson",
          "district_id_number" : "B453"
        }
      ]
    }
  ]
}

在我的类模型中，我有一个计算属性，就像我循环嵌入的学生对象，将它们加载到侧载数据中，然后使用 find 将它们拉出来一样。

  classroomStudents: function () {
    var studentObjects = [],
        students = this.get('students');

    Msmapp.Student.load(students);

    students.forEach(function(student) {
      studentObjects.pushObject(Msmapp.Student.find(student.id));
    });

    return studentObjects;
  }.property('students')

我在想 this.get('students')可能不是什么 Msmapp.Student.load(students);期待。我假设它需要原始格式的数据并且我不是 100% 肯定 this.get('students')就是它。

这是什么 this.get('students')当我调试

[Object
   resource_document_ids: Array[0]
   resource_ids: Array[0]
   resource_image_ids: Array[0]
   resource_video_ids: Array[0]
   __proto__: Object
       district_id_number: "MD454"
       first_name: "Henry"
       id: 5
       resource_document_ids: Array[0]
       resource_ids: Array[0]
       resource_image_ids: Array[0]
       resource_video_ids: Array[0]
       __proto__: Object
 ,Object
 ,Object
]

当我调试返回的 studentObjects 时数组我得到了类(class)，但它们似乎不正确

[Class
    __ember1372909895769: undefined
    __ember1372909895769_meta: Meta
   _super: undefined
   data: Object
   isLoaded: true
   isNew: false
   __proto__: Object
     id: 5
     resource_document_ids: Array[0]
     resource_ids: Array[0]
     resource_image_ids: Array[0]
     resource_video_ids: Array[0]
     __proto__: Object
     __defineGetter__: function __defineGetter__() { [native code] }
     __defineSetter__: function __defineSetter__() { [native code] }
     __lookupGetter__: function __lookupGetter__() { [native code] }
     __lookupSetter__: function __lookupSetter__() { [native code] }
     constructor: function Object() { [native code] }
     hasOwnProperty: function hasOwnProperty() { [native code] }
     isPrototypeOf: function isPrototypeOf() { [native code] }
     propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
     toLocaleString: function toLocaleString() { [native code] }
     toString: function toString() { [native code] }
     valueOf: function valueOf() { [native code] }
     isLoaded: true
     isNew: false
, Class
, Class
] 

在我的模板中，我有这样的东西

<ul>
  {{#if classroomStudents }}
    {{#each student in classroomStudents }}
      <li class="listed_item micro">
        {{#linkTo "classroom_student" student }}
          <div class='title'>{{ student.first_name }}</div>
        {{/linkTo}}
      </li>
    {{/each}}
  {{ else }}
  <li class="item">
    {{#linkTo "classroom.new_student" classNames='header_link tooltip'}}
      No students assigned
    {{/linkTo}}
  </li>
  {{/if}}
</ul>

我没有得到任何值，因为它们似乎没有在对象上设置，但链接工作正常。我想这是因为正在设置 id。

两者 {{ student.first_name }}或 {{ first_name }}未定义。

Answer 1

您的数据未正确构建以进行侧加载。要侧载数据，您需要:

在返回的 JSON 的最高级别创建一个附加键，其中包含要旁加载的数据。在下面的示例中，我从包含所有学生的返回数据的最高级别创建了一个“学生”属性。

在返回的每个主要对象中，通过键来引用这些附加项目。在下面的示例中，我将每个类(class)的“students”属性更改为“student_ids”，并使其成为引用侧载数据中每个学生的 id 的整数数组。

例子:

{
  "classrooms" : [
    {
      "classroom_name" : "Class 1",
      "id" : 1,
      "teacher_id" : 3,
      "grade" : 5,
      "assignments" : [

      ],
      "student_ids" : [ 5 ]
    },
    {
      "classroom_name" : "Class 3",
      "id" : 2,
      "teacher_id" : 3,
      "grade" : 4,
      "assignments" : [
        {
          "id" : 5,
          "assignment_overview" : "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\r\n\r\nNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.",
          "assignment_title" : "Fractions",
          "story" : null
        }
      ],
      "student_ids" : [ 5, 3, 6]
    }
  ],
  "students" : [
    {
      "id" : 5,
      "first_name" : "Henry",
      "last_name" : "Ford",
      "district_id_number" : "MD454"
    },
    {
      "id" : 3,
      "first_name" : "Jake",
      "last_name" : "Strong",
      "district_id_number" : "WH6879"
    },
    {
      "id" : 6,
      "first_name" : "Bryan",
      "last_name" : "Dobson",
      "district_id_number" : "B453"
    }
  ]
}

如果您以这种方式构建数据，Ember Data 应该会为您处理连接。

更多信息 here .