0

我是骨干新手，我遇到了一个问题

简而言之问题

我有两个要显示的列表。

1.课程

2.所选课程的学生

我现在可以展示。

现在在StudentList 视图中（它使用“学生”集合）我有一个添加按钮，它为所选课程项目添加学生（在单独的视图中）。为此，我需要知道我在StudentList 视图中单击了哪个课程项目。为此，我在单击课程时将 courseId 存储在隐藏字段中，稍后在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上发布的问题 的延续Using Event Aggregator to load a view with different model in bone js 这个链接可能有助于了解我的问题的更多细节。

谢谢你的耐心

4

1 回答 1

0

这应该是一个部分答案，它可能会引导你走向正确的道路或进入战壕。就这样吧。

  1. 最好有 2 个视图，一个用于学生列表，一个用于课程列表。提供一个复选框列表应该对课程列表有好处，因为学生 -> 课程是一对多的关系。

  2. Course(model) 应该有一个选定的属性（仅在客户端，对服务器端没有意义），您可以在单击复选框时切换该属性。课程（收藏）应该用亮点等重绘改变的课程

  3. Courses(Collection) 应该可以通过 window 对象访问。就像window.App.Students.CoursesCourses 是 Courses 集合的一个实例。前任：window.App.Students.Courses = new window.App.Students.Collection.Courses;

  4. 现在选择课程并选择学生。您可以全局访问已选择的课程（可以使用 underscore.js 方法检索），然后将课程 ID 设置为所选学生的数组。类似的东西for each selectedstudent ( foreach selectedCourse selectedStudent.course.push(selectedCourse))。学生的 json 将如下所示

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

代码

在学生视图中，执行以下操作以获取学生的所选课程。

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

使用筛选方法获取所选课程。然后将课程分配给学生，如 #4 所示。

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

this.collection.forEach(function(student){

student.set("courses") = selectedCourses;

});

通过执行上述操作，每个学生现在都具有courses为您提供该学生所选课程的属性。

于 2012-06-18T07:15:00.170 回答