點擊了表格行被不選擇

Question

我想通過點擊它，就像在這裏做一個簡單的錶行選擇：

http://jsfiddle.net/rniemeyer/APzK8/6/

我應用了上述邏輯，但仍然沒有被選中，是什麼我錯了嗎？

數據顯示正確，只是選擇不起作用。

define(['services/dataservice'], function (dataservice) { 

    var self = this; 
    this.Selected = ko.observable(); 
    var schoolyears = ko.observableArray(); 

    this.SelectSchoolyear = function (config) { 
     self.Selected(config); 
    }; 

    this.Selected(schoolyears()[0]); 

    var vm = { 
     activate: activate, 
     schoolyears: schoolyears, 
     title: 'Schoolyears' 
     }; 
    return vm; 

    function activate(){ 
     var schoolyearModels = dataservice.getSchoolyears(); 
     var schoolyearViewModels = []; 
     for (var i = 0; i < schoolyearModels.length; i++){ 
      var e = schoolyearModels[i]; 
      var schoolyearViewModel = new SchoolyearViewModel(e.schoolyearId, e.schoolyearName, e.from, e.to, e.lastEdited, self.Selected); 
      schoolyearViewModels.push(schoolyearViewModel); 
     } 
     return schoolyears(schoolyearViewModels); 
    } 
    function SchoolyearViewModel(id, schoolyearName, from, to, lastEdited, selected){ 
     var me = this; 
     this.schoolyearId = id; 
     this.schoolyearName = ko.observable(schoolyearName); 
     this.from = ko.observable(from); 
     this.to = ko.observable(to); 
     this.lastEdited = ko.observable(lastEdited); 
     this.AmISelected = ko.computed(function(){ 
      debugger; 
      return selected() === me; 
     }); 
    } 

}); 


<section id="schoolyears-view" class="view"> 
    <a class="btn btn-info btn-force-refresh pull-right" data-bind="click: remove" href="#"><i class="icon-remove"></i>Delete</a> 

    <table class="table table-striped table-bordered table-condensed"> 
     <thead> 
      <tr> 
       <th style="width: 25%">Schoolyear name</th> 
       <th style="width: 25%">From</th> 
       <th style="width: 25%">To</th> 
       <th style="width: 250%">Last edited</th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: schoolyears"> 
      <tr data-bind="click: $parent.SelectSchoolyear, css: { selected: AmISelected }, attr: { 'data-id': schoolyearId }" > 
       <td data-bind="text: schoolyearName()"></td> 
       <td data-bind="text: from()"></td> 
       <td data-bind="text: to()"></td> 
       <td data-bind="text: lastEdited()"></td> 
      </tr> 
     </tbody> 
    </table> 
</section> 

Answer 1

這個問題似乎是淘汰賽正在尋找vm對象的remove和SelectSchoolyear方法，但它們不存在。它們只在this對象上。

這裏有一個解決方案（注意，您仍然需要remove實現）：

var vm = { 
    activate: activate, 
    schoolyears: schoolyears, 
    title: 'Schoolyears', 
    SelectSchoolyear: self.SelectSchoolyear, 
    remove: function() {} 
}; 

這假定activate某處調用。

vm.activate(); 

我做了一個可用的JSFiddle here。

注意：要查看綁定錯誤（就像我提到的那樣），只需使用瀏覽器的開發者控制檯（Knockout將拋出異常）。