VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Knockout.js でTodos のサンプルを組み込んでみた。

前回

Backborn.jsのTodosアプリでAzure SQL(クラウド)+MVC5(VS2013)の組み込み。

今回

前回はBackborn.js(MVVMフレームワーク)+Todoｓアプリは、、今回はKnockout.jsにて作成してみます。

C#とかVBAとかに慣れている私にとっては、非常にとっつきやすく、とても簡単なのが印象的でした。

DOMの要素(button, input, だいたいなんでも) に data-bindすれば、 foreachや埋め込み変数など使えますし。

http://kojs.sukobuto.com/docs/introduction

ko.observableをつかえば、データが変更したイベントを受け取りViewを更新することもできます。

http://kojs.sukobuto.com/docs/observables

以下はイメージです。

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());
});