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