0

私はバックボーンに不慣れで、問題で立ち往生しています

要するに問題

表示するリストが2つあります。

1.コース

2.選択したコースの学生

私は今それを示すことができます。

これで、StudentListビュー（「Students」コレクションを使用）に、選択したコースアイテム（別のビューにあります）の学生を追加する追加ボタンがあります。そのためには、StudentListビュー内でクリックしたコースアイテムを知る必要があります。そのために、コースがクリックされたときにコースIDを非表示フィールドに保存し、後でStudentListビューでその非表示フィールド値をフェッチして、新しい学生を追加しました。

私がやりたいのは、courseIdを非表示フィールドに保存する代わりに、コースがクリックされたときに、courseIdを属性として「Students」コレクションに追加できますか。

アプローチを試みた

StudentListビューの中に私はこのようなものを書きました

var StudentList = Backbone.View.extend({
 initialize: function () {
    this._meta = {};       
},  

put: function (prop, value) {
    this._meta[prop] = value;
},
get: function (prop) {
    return this._meta[prop];
},   
events: {
    "click    #btnAddStudent": "createNewStudent"
},

createNewStudent: function () {      
    var some =  this.get("someProp");       
    this.collection.create({ Name: this.$el.find('#txtNewStudent').val(), 
    CourseId: some  });       
}
});

そして、「courseClicked」関数では、このようにしました（「courseClicked」関数はCourseItemビュー内にあります）

var CourseItem = Backbone.View.extend({  
events: {        
    'click': 'courseClicked'
},
initialize: function () {
    this.students = this.options.students;
},  
courseClicked: function () {
    var courseId = this.model.id;
    this.students.put('someProp',courseId);
    this.students.fetch({ data: { courseId: courseId} });
}   
});

putおよびget関数はcourseitemビューコンテキストでは使用できないため、上記は機能しません。これらはStudentListビューで定義されています。誰かが私のニーズを達成する方法を教えてくれますか？

この質問は、以前にSOに投稿した質問の続きです 。イベントアグリゲーターを使用してバックボーンjsに異なるモデルのビューをロードする このリンクは、私の質問の詳細を知るのに役立つ場合があります。

お待ち頂きまして、ありがとうございます

4

1 に答える 1

0

this should be a partial answer which might lead you to right way or into the trenches. Here it goes.

  1. It is best that you have 2 views one for Students list and one for course list. Providing a checkbox list should be good for the course list as Students -> Course is one to many relationship.

  2. Course(model) should have a selected attribute(only on client, no significance to server side) which you toggle during checkbox click. Courses (collection) should redraw the changed course with highlights etc

  3. The Courses(Collection) should be accessible through window object. something like window.App.Students.Courses where Courses is an instance of Courses collection. ex:window.App.Students.Courses = new window.App.Students.Collection.Courses;

  4. Now when the course is selected and students are selected. You have global access to courses that have been selected ( which can be retrieved using underscore.js methods) then set the course id into a array for the selected students. something like for each selectedstudent ( foreach selectedCourse selectedStudent.course.push(selectedCourse)). json for student will then look like below

{ id: 1, name: "Jack Keane", courses: [1, 2, 5, 6, 7] }

Code

Inside the Student view, do the following to get the selected courses for the student.

window.courses.filter(function(course){
  return course.get("selected");
});

use the filter method for obtaining the selected courses. Then assign the course to the student as in #4.

var selectedCourses =     window.courses.filter(function(course){
      return course.get("selected");
    });

this.collection.forEach(function(student){

student.set("courses") = selectedCourses;

});

by doing the above, every student now has courses attribute that gives you the selected courses for this student.

于 2012-06-18T07:15:00.170 に答える