使用ember模型对数据进行侧载的正确方法

时间:2013-07-04 05:16:01

标签: ember.js ember-model

我试图了解使用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
    __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 }}未定义。

1 个答案:

答案 0 :(得分:6)

您的数据未正确构建用于侧载。要侧载数据,您需要:

  1. 在返回的JSON的最高级别创建一个附加密钥,其中包含要加载的数据。在下面的示例中,我在包含所有学生的返回数据的最高级别创建了“学生”属性。
  2. 在返回的每个主要对象中按键引用这些附加项目。在下面的示例中,我将每个班级的“学生”属性更改为“student_ids”,并将其作为一个整数数组,引用了侧载数据中每个学生的ID。
  3. 示例:

    {
      "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

相关问题