Knockout JS with Mapping Plug-in ('-' * 32) This example demonstrates how to apply the ko.mapping plugin to a plain JavaScript object and include it an existing ko view model object.
A Pen by Siôn J. Lewis on CodePen.
Last active
August 29, 2015 14:22
-
-
Save sionjlewis/7702b7a37b8ddae50714 to your computer and use it in GitHub Desktop.
Knockout JS with Mapping Plug-in
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> | |
| </head> | |
| <body> | |
| <div>Main Title: <span data-bind="text: title"></span></div> | |
| <hr /> | |
| <div id="issueWrapper" data-bind="foreach: { data: $root.issuesWithActions, as: 'iwa' }"> | |
| <div class="groupHeader">Issue: <span data-bind="text: iwa.title"></span></div> | |
| <div class="groupRow"> | |
| <input type="text" data-bind="value: iwa.title"/> | |
| <!-- Start: Actions --> | |
| <div id="actionWrapper" data-bind="foreach: { data: iwa.actions, as: 'act' }"> | |
| <div class="groupHeader">Action: <span data-bind="text: act.title"></span></div> | |
| <div class="groupRow"> | |
| <input type="text" data-bind="value: act.title"/> | |
| </div> | |
| </div> | |
| <!-- End: Actions --> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (SJL === undefined || typeof (SJL) !== 'object') { var SJL = new Object(); } | |
| SJL = function () { | |
| var self = {}; | |
| return{ | |
| onPageLoad: function () { | |
| SJL.ViewModel.applyViewModelBinding(); | |
| } | |
| } | |
| }(); | |
| SJL.ViewModel = function () { | |
| var self = {}; | |
| self.vmMain = { | |
| title: ko.observable('Testing Knockout JS'), | |
| issuesWithActions: ko.observableArray() | |
| } | |
| return{ | |
| applyViewModelBinding: function () { | |
| var tempArray = SJL.Repository.get_issuesWithActions(); | |
| self.vmMain.issuesWithActions = | |
| ko.mapping.fromJS(tempArray); | |
| ko.applyBindings(self.vmMain); | |
| //alert('The code has run.'); | |
| } | |
| } | |
| }(); | |
| SJL.Model = function () { | |
| return { | |
| action: function (id, title) { | |
| this.id = id; | |
| this.title = title; | |
| }, | |
| issuesWithActions: function (id, title, actions) { | |
| this.id = id; | |
| this.title = title; | |
| this.actions = actions; | |
| } | |
| } | |
| }(); | |
| SJL.Repository = function () { | |
| var self = {}; | |
| self.get_issuesWithActions = function () { | |
| var actArray01 = []; | |
| actArray01.push(new SJL.Model.action(1, 'Act 01A')); | |
| actArray01.push(new SJL.Model.action(2, 'Act 02A')); | |
| actArray01.push(new SJL.Model.action(3, 'Act 03A')); | |
| var actArray02 = []; | |
| actArray02.push(new SJL.Model.action(1, 'Act 01B')); | |
| actArray02.push(new SJL.Model.action(2, 'Act 02B')); | |
| var iwaArray = []; | |
| iwaArray.push(new SJL.Model.issuesWithActions(1, 'Iss 01', actArray01)); | |
| iwaArray.push(new SJL.Model.issuesWithActions(2, 'Iss 02', actArray02)); | |
| return iwaArray; | |
| } | |
| return { | |
| get_issuesWithActions: function () { | |
| return self.get_issuesWithActions(); | |
| } | |
| } | |
| }(); | |
| $(document).ready(function () { | |
| SJL.onPageLoad(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #issueWrapper { | |
| padding: 5px; | |
| } | |
| #actionWrapper { | |
| padding: 5px; | |
| padding-left: 20px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment