前回
Backborn.jsのTodosアプリでAzure SQL(クラウド)+MVC5(VS2013)の組み込み。
今回
前回はBackborn.js(MVVMフレームワーク)+Todosアプリは、、今回はKnockout.jsにて作成してみます。
C#とかVBAとかに慣れている私にとっては、非常にとっつきやすく、とても簡単なのが印象的でした。
DOMの要素(button, input, だいたいなんでも) に data-bindすれば、 foreachや埋め込み変数など使えますし。
ko.observableをつかえば、データが変更したイベントを受け取りViewを更新することもできます。
以下はイメージです。
Web Siteは以下です。
http://vs-samples.azurewebsites.net/Home/Knockout_Todos
サンプルコードは以下のGitHubに保存しました。
https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI
/Views/Home/index.cshtml
@{ ViewBag.Title = "Knockout_Todos"; } <h2>Todo: Knockout.js with Twitterbootsrap</h2> <div class="container"> <input type="text" placeholder="Enter Todo" value="" data-bind="value: todoInputValue" /> <button data-bind="click:addTodo">Add</button> <table class="table table-hover"> <thead> <tr> <th>Todo</th> <th>Delete</th> </tr> </thead> <tbody data-bind="foreach: todoList"> <tr> <td data-bind="text: todoText"></td> <td><button class="btn btn-default" data-bind="click:$root.removeTodo">削除</button></td> </tr> </tbody> </table> </div> @section scripts{ <script type="text/javascript" src="~/Scripts/knockout-3.1.0.js"></script> <script type="text/javascript" src="~/Scripts/test.js"></script>
/Scripts/test.js
$(function () { //Modelを定義 function TodoModel(value) { var self = this; self.todoText = ko.observable(value); } //ViewModelを定義 function TestappViewModel() { var self = this; self.todoList = ko.observableArray(); //todoの配列 self.todoInputValue = ko.observable(''); //todo 入力値 //Todo追加 self.addTodo = function (obj, e) { if (!self.todoInputValue()) return; //配列に追加する。 self.todoList.unshift(new TodoModel(self.todoInputValue())); //入力値を消去する。 self.todoInputValue(''); }; //To削除 self.removeTodo = function (obj, e) { self.todoList.remove(obj); }; } //binding (View - VIewMode) ko.applyBindings(new TestappViewModel()); });
参考
knockoutのホームページ
Knockout.js 日本語ドキュメント
Knockout-Bootstrap
Helping you select an MV* framework
Hello world, with Knockout JS and ASP.NET MVC 4!
clickサンプル
さくさくアプリ開発
コメントを残す