Knockout.js : 기존 테이블에 매핑하여 다중 항목 추가

Question

HTML 테이블을 가지고 있으며 knockout.js 관측 값을 정의하려고합니다. createTrack 함수를 클릭하면 테이블의 기존 내용이 다시 추가되고 트랙에 대한 새 항목을 추가하려고합니다. 이 문제를 해결하는 데 도움이 필요합니다.

참고 : JSON을 사용하여 콘텐츠를 동적으로 가져오고 싶지는 않습니다. SEO/기타 이유에 영향을주기 때문입니다. 바이올린에

링크 : 당신이 정말 동적 데이터와 함께 작동하도록 노력하지 않고있는 것처럼 http://jsfiddle.net/ATDJp/1/

보기 모델 코드

(function() { 
    var tracks = ko.utils.parseHtmlFragment('#tracks-table'); 

    // represent a single track item 
    var Track = function (TrackNo, TrackTitle, TrackLength) { 
     this.TrackNo = ko.observable(TrackNo); 
     this.TrackTitle = ko.observable(TrackTitle); 
     this.TrackLength = ko.observable(TrackLength); 
    }; 

    var TracksViewModel = function (tracks) { 
     var self = this; 

     // All track 
     self.tracks = ko.observableArray(ko.utils.arrayMap(tracks, function (track) { 
      return new Track(track.TrackNo, track.TrackTitle, track.TrackLength); 
     })); 

     // Add a new Track on click of new button 
     self.createTrack = function() { 
      // Add a new Track 
      self.tracks.push({ TrackNo: "", TrackTitle: "", TrackLength: "" }); 
     }; 
    } 

    // check data from local table 

    // var tracks = ko.utils.parseJson(JSON.stringify(jQuery('#tracks-table').tableToJSON())); 

    // bind a new instance of our view model to the page 
    var TracksViewModel = new TracksViewModel(tracks || []); 
    ko.applyBindings(TracksViewModel); 
})(); 

Answer 1

는 소리가 난다. 왜 당신은이 작업을 위해 녹아웃을 바꾸고 jQuery를 사용하지 않는가? HTML 오류 (비 종료 TD)도있었습니다.

http://jsfiddle.net/ATDJp/3/

$('#btnaddnewtrack').on('click', function() { 
     $('#tracks-table tr:last').after('<tr><td>3</td><td>track3</td><td>4:30</td></tr>'); 
});