Created
November 11, 2014 15:10
-
-
Save hirokazumiyaji/cf585a9883eeea47417b to your computer and use it in GitHub Desktop.
kockout.js sample
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| function Campaign(data) { | |
| var self = this; | |
| self.ID = ko.observable(data.id); | |
| self.Name = ko.observable(data.name); | |
| self.UserID = ko.observable(""); | |
| self.Code = ko.observable(""); | |
| self.Save = function() { | |
| var data = { | |
| "id": self.ID(), | |
| "user_id": self.UserID(), | |
| "code": self.Code() | |
| }; | |
| $.post("http://localhost:8080/", data, function(data) { | |
| console.log(data); | |
| }); | |
| } | |
| } | |
| function CampaignViewModel() { | |
| var self = this; | |
| self.Campaigns = ko.observableArray([]); | |
| $.getJSON("http://localhost:8080/", function(data) { | |
| var campaigns = $.map(data, function(item) { return new Campaign(item); }); | |
| self.Campaigns(campaigns); | |
| }); | |
| } | |
| ko.applyBindings(new CampaignViewModel()); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div data-bind="foreach: Campaigns"> | |
| <form method="post"> | |
| <input type="hidden" data-bind="value: ID" /> | |
| <label data-bind="value: Name"></label><br /> | |
| <label>User ID</label><br /> | |
| <input type="text" data-bind="value: UserID" /><br /> | |
| <label>Code</label><br /> | |
| <input type="text" data-bind="value: Code" /><br /> | |
| <button data-bind="click: Save">Save</button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment