Question

我有一个HTML表格，想在它们上定义一些knockout.js可观察对象。当我点击createTrack函数时，再次添加表的现有内容，想为轨道添加新条目。需要帮助来解决这个问题。

注意：我不想使用JSON动态获取内容，因为它会影响SEO /其他原因。

查看型号代码

(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>'); 
});

Knockout.js：映射到现有表，添加多个条目

1 个答案: