StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POKnockout.js : Mapping to existing table, adds Multiple Entries
text
Body
copied!<p>I have a table in HTML and would like to define some knockout.js observables on them. When i click on the createTrack function, existing contents of table are once again added, would like to add a new entry for track. Help needed to fix this problem.</p> <p>Note : I don want to dynamically fetch content using JSON, as it affects SEO/other reasons.</p> <p>Link to Fiddle : <a href="http://jsfiddle.net/ATDJp/1/" rel="nofollow">http://jsfiddle.net/ATDJp/1/</a></p> <p>View Model Code</p> <pre><code>(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); })(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload