Kendo MVVM ฉบับเข้าใจง่ายๆ

MVVM ย่อมาจาก Model View ViewModel เป็น design pattern ที่จะช่วยให้สามารถแบ่งแยกข้อมูลจาก UI (User Interface) ซึ่งเป็นส่วนติดต่อกับผู้ใช้งาน ในส่วน View-Model ของ MVVM มีหน้าที่จัดการข้อมูลจาก Model ที่จะถูกนำไปแสดงใน View

การสร้าง View-Model

เมื่อต้องการสร้าง View-Model สามารถสร้างโดยใช้คำสั่ง kendo.observable function

var viewModel = kendo.observable({
    name: "mooking potter",
    displayGreeting: function(){
        var name = this.get("name");
        alert( "Hello, " + name + "!!!" );
    }
});

การสร้าง View

เราจะต้องสร้าง HTML element สำหรับแสดง View เพื่อให้ที่จะถูกไป Binding กับ View-Model

<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display</button>
</div>

การ Binding View-Model เข้ากับ View

หัวใจสำคัญที่จะทำให้ View แสดงข้อมูลได้อย่างที่เราต้องการ คือ การ binding View-Model เข้ากับ View

kendo.bind($("#view"), viewModel);

สามารถอ่านเพิ่มเติมได้ที่ https://docs.telerik.com/kendo-ui/framework/mvvm/overview