녹아웃 foreach 바인딩은 첫 번째 항목 만 반복적으로 표시합니다.

Question

ko observableArray를 테이블에 바인딩 할 때 문제가 발생합니다. [jsFiddle] [1]. jsFiddle 그것은에

<tbody data-bind="foreach: $root.TakenCourses"> <tr> <td> <span data-bind="text: courseName"></span></td> <td> <span data-bind="text: courseCredits"></span></td> <td> <button data-bind="click: removeCourse">Remove</button></td> </tr> </tbody>

http://jsfiddle.net/chetanpawar0989/do6o7wtb/

은 첫 번째 항목을 보여주는 것. 그러나 과정을 추가하면 배열의 길이가 늘어나고 최신 과정이 takenCourses 배열 (경고 상자에 표시됨)에 추가됩니다. 즉 데이터를 바인딩 할 때 뭔가를 고수하고 있음을 의미합니다.

또한 웹 페이지에서 동일한 코드를 실행하면 코스를 추가 할 때 첫 번째 코스가 반복적으로 표시됩니다.

제거 기능이 작동하지 않습니다.

나는 KO를 처음 접하고 기본적인 것을 배웁니다.

Answer 1

course 개체에 함수 removeCourse이없는 것이 문제입니다.

<button data-bind="click: removeCourse">Remove</button> 

따라서 어쩌면이 같은

<button data-bind="click: $root.removeCourse">Remove</button> 

---

당신은 비록 약간 모두를 재 설계 할 수 있어야한다 :

대신 선택하고 선택되지 않은 과목의 목록을 유지

var course = function(name, credits, selected) { 
    var self = this; 

    this.courseName = name; 
    this.courseCredits = credits; 
    this.selected = ko.observable(!!selected); 

    this.unselectCourse = function() { 
     self.selected(false); 
    }; 
}; 

, 나는 이것을 각 과정의 재산으로 삼을 것을 권고한다. 뷰 모델에서는 다음 동적 목록을 사용합니다 :

function NCSUCourseModel() 
{ 
    var self = this; 

    //Static list of available courses 
    self.courses = ko.observableArray([ 
     new course("Orientation", 1, true), 
     new course("Operating Sytems", 3), 
     new course("Algorithms", 3), 
     // ... 
    ]); 

    self.selectedCourse = ko.observable(); 

    self.AvailableCourses = ko.computed(function() { 
     return ko.utils.arrayFilter(self.courses(), function(item) { 
      return item.selected() == false; 
     }); 
    }); 

    self.TakenCourses = ko.computed(function() { 
     return ko.utils.arrayFilter(self.courses(), function(item) { 
      return item.selected() == true; 
     }); 
    }); 

    self.AddCourse = function() { 
     this.selectedCourse().selected(true); 
    }; 
} 

http://jsfiddle.net/do6o7wtb/2/