Loading and save data with Knockout

วันนี้ขอแนะนำเรื่อง Knockout นะครับ เป็น Library ขนาดเล็กที่ช่วยให้งานสร้าง dynamic UI ง่ายขึ้น ด้วย (Model-View-ViewModel) MVVM Pattern ประกอบด้วยส่วนหลักๆคือ Declarative Binding, Automatic UI Refresh, Dependency Tracking, และ Templating น่าสนใจดีนะครับ

เริ่มแรกสร้างโปรเจค MVC ขึ้นมาก่อน จากนนั้น Reference Knockout.js

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" 
        type="text/javascript"></script>


จากนั้นเขียน HTML ดังนี้

<h3>Loading and save data with Knockout</h3>

<form data-bind="submit: addTask">
    Add task: 
    <input data-bind="value: newTaskText" 
        placeholder="What needs to be done?" />
    <button type="submit">Add</button>
</form>

<ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask"
             class='button-list'>Delete</a>
    </li> 
</ul>

<br /><br /> 
You have <b data-bind="text: incompleteTasks().length">&nbsp;</b>
incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"></span>

ในตัวอย่างผมได้สร้าง CSS ไว้แสดงหน้าจอด้วย เพราะอยากให้ปุ่ม Delete ในตัวอย่างออกมาในรูปแบบที่ต้องการ

<style>
    html,body{ background:#ffffff;}
    
    .button-list
    {
        text-decoration:none;
        background:#696969; 
        border:1px soid #000000; 
        font-size:11px; 
        color:#ffffff!important; 
        padding:3px 8px 3px 8px;
    }
</style>

จากนั้นเมื่อ Run จะได้หน้าจอ ดังนี้

ตอนนี้หน้าจอจะยังไม่สามารถทำงานได้ ต้องเขียน Javascript นี้ก่อน เพื่อกำหนดส่วนของ Data และ Opeation ดังนี้

<script>
    function Task(data) {
        this.title = ko.observable(data.title);
        this.isDone = ko.observable(data.isDone);
    }

    function TaskListViewModel() {
        // Data
        var self = this;
        self.tasks = ko.observableArray([]);
        self.newTaskText = ko.observable();
        self.incompleteTasks = ko.computed(function () {
            return ko.utils.arrayFilter(self.tasks(),
                function (task) {
                    return !task.isDone() 
            });
        });

        // Operations
        self.addTask = function () {
            self.tasks.push(new Task({
                title: this.newTaskText() 
            }));
            self.newTaskText("");
        };
        self.removeTask = function (task) {
            self.tasks.remove(task) 
        };
    }

    ko.applyBindings(new TaskListViewModel());</script>

จากนั้นเมื่อ Run แล้วกรอกข้อมูลที่ TextBox กดปุ่ม Add จะทำงานโดยบันทึกข้อมูลแล้วโหลดแสดงรายการ

credit : http://learn.knockoutjs.com/#/?tutorial=loadingsaving