Question

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

问题简而言之

我要显示两个列表。

1.Courses

2.选修课程的学生

我现在能够展示。

现在在学生列表视图（它使用“学生”集合）中，我有一个添加按钮，可以为所选课程项目添加学生（在单独视图中）。为此我需要知道我在 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函数，它们在StudentList视图中定义。任何人都可以指导我如何满足我的需求。

这个问题是我之前在 SO 上发布的问题的延续 Using Event Aggregator to load a view with different model in backbone js 此链接可能有助于了解我的问题的更多详细信息。

感谢您的耐心

Answer 1

这应该是一个部分答案，可能会导致你正确的方式或进入战壕。在这里。

最好有2个视图用于学生列表，1个用于课程列表。提供复选框列表应该对课程列表有好处，因为学生 - ＆gt;课程是一对多的关系。
课程（模型）应该具有选中的属性（仅在客户端，对服务器端没有意义），您可以在复选框单击期间切换。课程（集合）应重新绘制已更改的课程和重点等
课程（收藏）应该可以通过窗口对象访问。像window.App.Students.Courses这样的课程，其中课程是课程集合的实例。例如：window.App.Students.Courses = new window.App.Students.Collection.Courses;
现在选择课程并选择学生。您可以全局访问已选择的课程（可以使用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");
});

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

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

this.collection.forEach(function(student){

student.set("courses") = selectedCourses;

});

通过以上操作，每个学生现在都有courses属性，可以为您提供为该学生选择的课程。

如何使用骨干js将一个集合的单击项的id设置为另一个集合的属性

1 个答案:

代码