Created
July 4, 2016 09:12
-
-
Save peace098beat/68573599890020789e0d549998fe4bf6 to your computer and use it in GitHub Desktop.
[Knockout.js] Works Page
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> | |
| <title>Knockout.js</title> | |
| <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css"> | |
| <script src="./js/jquery.min.js"></script> | |
| <script src="./bootstrap/js/bootstrap.min.js"></script> | |
| <script src="./js/knockout.min.js"></script> | |
| <script src="./js/user-script.js"></script> | |
| </head> | |
| <body> | |
| <header class="container"> | |
| <h1>learn.knockoutjs.com</h1> | |
| <p><a href="http://learn.knockoutjs.com/#/?tutorial=intro">http://learn.knockoutjs.com/#/?tutorial=intro</a></p> | |
| </header> | |
| <div id="works" class="container"> | |
| <h3>works</h3> | |
| <div id="add-content"> | |
| <p>Add Contents</p> | |
| <input data-bind="value: newWork.date" type="date" autofocus> | |
| <input data-bind="value: newWork.content" type="text"> | |
| <input data-bind="value: newWork.place" type="text"> | |
| <button data-bind="click: addContent">Add</button> | |
| </div> | |
| <table class="table" data-bind="visible: works().length > 0"> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>content</th> | |
| <th>place</th> | |
| <th>Delete</th> | |
| <th>Edit</th> | |
| </tr> | |
| </thead> | |
| <tbody data-bind="foreach: works"> | |
| <tr data-bind="visible: $root.isEditMode "> | |
| <td data-bind="text: date"></td> | |
| <td data-bind="text: content"></td> | |
| <td data-bind="text: place"></td> | |
| <td data-bind=" "> | |
| <button data-bind="click: $root.removeWork">Delete</button> | |
| </td> | |
| <td data-bind=" "> | |
| <button data-bind="click: $root.startEditMode">Edit</button> | |
| </td> | |
| </tr> | |
| <tr data-bind="visible: $root.isnotEditMode "> | |
| <td> | |
| <input data-bind="value: date"> | |
| </td> | |
| <td> | |
| <input data-bind="value: content"> | |
| </td> | |
| <td> | |
| <input data-bind="value: place"> | |
| </td> | |
| <td data-bind=" "> | |
| <button data-bind="click: $root.removeWork">Delete</button> | |
| </td> | |
| <td data-bind=" "> | |
| <button data-bind="click: $root.finEditMode">Edit</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| </tfoot> | |
| </table> | |
| <p>editmode:<span data-bind="text: isEditMode"></span></p> | |
| <p>editmode:<span data-bind="text: isnotEditMode"></span></p> | |
| <button data-bind="click: finEditMode">fEdit</button> | |
| <button data-bind="click: startEditMode">sEdit</button> | |
| </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
| window.onload = function() { | |
| // 1桁の数字を0埋めで2桁にする | |
| var toDoubleDigits = function(num) { | |
| num += ""; | |
| if (num.length === 1) { | |
| num = "0" + num; | |
| } | |
| return num; | |
| }; | |
| function WorkModel(date, place, content) { | |
| var self = this; | |
| self.date = ko.observable(date); | |
| self.place = ko.observable(place); | |
| self.content = ko.observable(content); | |
| } | |
| // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI | |
| function AppViewModel() { | |
| var self = this; | |
| self.works = ko.observableArray([ | |
| new WorkModel("2016-02-09", "Akasaka", "Hiakru Exvision vol 1"), | |
| new WorkModel("2015-03-12", "Aoyama", "CanColor Session") | |
| ]); | |
| self.newWork = { | |
| date: ko.observable(), | |
| content: ko.observable(), | |
| place: ko.observable() | |
| } | |
| self.isEditMode = ko.observable(true); | |
| self.isnotEditMode = ko.observable(false); | |
| // self.today = ko.computed(function() { | |
| // var d = new Date(); | |
| // return d.getFullYear() + "-" + toDoubleDigits(d.getMonth()) + "-" + toDoubleDigits(d.getDay()); | |
| // }); | |
| self.addContent = function(e) { | |
| // self.works.push(new WorkModel("2015-03-12", "Aoyama", "CanColor Session")); | |
| self.works.push( | |
| new WorkModel(self.newWork.date(), self.newWork.content(), self.newWork.place())); | |
| self.newWork.date(""); | |
| self.newWork.content(""); | |
| self.newWork.place("") | |
| }; | |
| self.removeWork = function(work) { | |
| console.log("remove"); | |
| self.works.remove(work); | |
| }; | |
| self.startEditMode = function() { | |
| console.log("startEditMode"); | |
| self.isEditMode(true); | |
| self.isnotEditMode(false); | |
| }; | |
| self.finEditMode = function() { | |
| console.log("finEditMode"); | |
| self.isEditMode(false); | |
| self.isnotEditMode(true); | |
| }; | |
| } | |
| // Activates knockout.js | |
| ko.applyBindings(new AppViewModel(), document.getElementById('works')); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment