492 views(since 2013/10/08)

Knockout.js で足し算アプリ (Visual Studio2013)

概要

足し算アプリのハンズオンを行うための資料です。

knockout-caluculate


/Views/Home/ index.cshtml

@{
    ViewBag.Title = "Knockout_Caluculate";
}

<h2>knockout - Caluculate</h2>
<div class="container">
    <p>
            <input data-bind="value:value1" type="text" />
            +
            <input data-bind="value:value2" type="text" />
            =
            <span data-bind="text:result"></span>
    </p>
</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 ViewModel() {
        var self = this;
        self.value1 = ko.observable(0);
        self.value2 = ko.observable(0);
        self.result = ko.computed(function () {
            return parseInt(self.value1()) + parseInt(self.value2());
        });
    }

    //binding (View - VIewMode)
    ko.applyBindings(new ViewModel());
});

参考

Filed Under: .NETJavaScript

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.