kendo ui 實現MVVM

阿新 • • 發佈：2018-08-19

visible set pri operation option per param -m edi

MVVM model----view model----model 實現頁面和model之間的動態綁定

grid 支持 events source visible綁定

第一步建立一個observable對象對象為參數

var viewModel = kendo.observable()

第二步實現視圖與 viewModel綁定

 kendo.bind($("#example"), viewModel);  //jQuery對象

註意對某一屬性設置值時使用

  this.set("isDescriptionShown", true);

     showDescription: function(e) {

     　　e.stopPropagation(); 
 　　　　e.preventDefault();

        this.set("isDescriptionShown", true);  //給屬性賦值
   }

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div>
            <h4>Add or update a record</h4>
            <div data-role="grid"
                 data 
-editable="true"
                 data-toolbar="[‘create‘, ‘save‘]"
                 data-columns="[
                                 { ‘field‘: ‘ProductName‘, ‘width‘: 270 },
                                 { ‘field‘: ‘UnitPrice‘ },
                              ]"
                 data-bind="source: products 
,   //綁定的屬性     
                            visible: isVisible,   //顯示隱藏
                            events: {
                              save: onSave
                            }"
                 style="height: 200px"></div>
        </div>
        <div style="padding-top: 1em;">
            <h4>Console</h4>
            <div class="console"></div>
        </div>
    </div>
    <div class="box wide">
        <div class="box-col">
            <h4>Configuration</h4>
            <div>
                <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>  //綁定的屬性
            </div>
        </div>
        <div class="box-col">
            <h4>Information</h4>
            Kendo UI Grid supports the
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
        </div>
    </div>
<script>
    var viewModel = kendo.observable({ //觀察者 檢測屬性的變化
        isVisible: true,
        onSave: function(e) {
            kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
        },
        products: new kendo.data.DataSource({
            schema: {  //圖表
                model: {
                    id: "ProductID",
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" }
                    }
                }
            },
            batch: true,  //批量的
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/products/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/products/create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            }
        })
    });
    kendo.bind($("#example"), viewModel);  //實現  視圖和 viewModel的綁定
</script>
</div>


</body>
</html>

kendo ui 實現MVVM

visible set pri operation option per param -m edi MVVM model----view model----model 實現頁面和model之間的動態綁定 grid 支持 events

kendo-ui的MVVM模式（贊）

摘要：　　MVVM(Model View ViewModel)是一種幫助開發者將資料從模型分離的設計模式。MVVM的ViewModel負責將資料物件從模型中分離出來，通過這種方式資料就很容易控制資料如何顯示在檢視上。建立View-Model物件：　　首先我們需要建立一個View

Kendo UI 多選的實現

頁面定義： //定義元素 <div> <input type="text" id="category" class="width-90Pc only-text" /> </div> //使用Kendo UI的模板語言對資料進行格式化，資料可以條件化，樣

Telerik Kendo UI 那點事【3】GridView MVVM前後臺聯動服務端分頁、分組、過濾（查詢）、排序

中文化之後，我們開始具體使用kendo ui元件。經常開發系統的我，通常從最常用的控制元件用起，那就是表格控制元件GridView！現在的軟體系統基本上就是標籤框、文字框、選擇框、樹、表格堆砌而成。因此接觸任何一種UI元件的時候，我通常都最為關注GridView，表格控制元

教你用JSON輕鬆實現Kendo UI Treeview序列化

Treeview是介面設計中經常要用到的控制元件，那你是否想過將介面開發工具中的treeview序列化呢？將它儲存之後就可以隨時載入呼叫，可以大大提升你的開發效率。本文將為你展示如何用一段jQuery程式碼輕鬆將 treeview 序列化。注：Kendo UI是 Telerik 推出的基於jQuery

多選ui實現單選效果

click oat html script 20px width false min mar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

AngularJS +Kendo UI Grid template

ret als idt ken ems data expand new index var dataSource = new kendo.data.DataSource({ transport: { dataType: "json",

微信小程序UI------實現攜程首頁頂部的界面（彈性布局）

app clas 點擊下載技術使用 css .html 攻略 enter 今天寫了一個攜程界面的UI，利用H5的彈性盒子來實現，學過H5彈性盒子的，來看是比較方便的，因為CSS代碼都差不多。可以看看這篇博客快速使用CSS 彈性盒子效果圖如下：　　主要是攜程首頁

kendo ui 查找treelist裏的子控件並設置是否顯示的方法

each log kendo ui 控制 style dex col div 顯示下面是循環的全過程： var treeList = $("#treelist").data("kendoTreeList"); //實例化treelist控件 var view = t

（1）kendo UI使用基礎介紹與問題整理——簡單說明

opd 開始引入 min 以及數據交互 mage 後來 log 由於項目需要，指定我們使用kendo UI作為前端框架，然後開始入了kendo的“坑”。前期是學習階段，對各個插件的用法進行了基本的了解，開始並未覺得有什麽嚴重問題，確實kendo的前端的大部

（6）kendo UI使用基礎介紹與問題整理——dropdownlist/基礎問題整理

val func 數據自信 itl ref 展開網址 tran 項目最近屬於第一階段的中後期，dropdownlist用的也算不少，首先對它的基本用法做一個整理。（插播一段：馬未都的八字方針：自信堅強、認真寬容。馬爺認為自信首先要擁有知識，然後要有勇氣在公眾面前

Vue之九數據劫持實現MVVM的數據雙向綁定

ldo img 枚舉需要 == eject def xxx prot vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，達到監聽數據變動的目的。如果不熟悉defineProperty，猛戳

（10）kendo UI使用基礎介紹與問題整理——loading

loading end show 需要 pre 請求 blog lose 發生請求數據的時候需要加一個蒙層，防止前端頁面發生重復操作的情況。下面是我使用的方法，將方法封裝到了函數裏： function showLoading() { kendo.ui.prog

JAVA UI 實現ZIP的壓縮與解壓縮

open return filepath sdi 每一個 util child length 壓縮與解壓縮壓縮與解壓縮代碼 package ZIP;import java.io.*;import java.util.Enumeration;import java.util

基於AT UI實現表格的增刪改查遇到的坑

data 基於報錯 color CA cannot bsp 加載 http 基於AT UI實現表格的增刪改查遇到的坑坑一、表格數據加載的渲染報錯報錯：Error in render: "TypeError: Cannot read property ‘isC

用Netty、Vue+Element-UI實現的IM

test element 驗證情況下 tro 內置 http服務消息處理時間之前工作接觸了幾個開源的IM產品，再加上曾經用Netty實現過幾個服務，於是就有了用Netty實現一個IM的想法，於是用業余時間寫了一個IM，和喜歡Netty的程序員們分享。考慮到方便擴

element UI實現動態生成多級表頭

required enter nextTick ops () vue 技術 opd 循環一、效果圖二、封裝兩個組件，分別為DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用遞歸來對表頭進行循環生成 Dynami

kendo ui 好用的小部件--grid

data any oda osi http bsp country posit column Kendo Ui Grid控件，繼承至Widget。 https://demos.telerik.com/kendo-ui/grid/index 快速上手教程下面的代碼來自本

kendo ui

pre 9.1 blog str bootstrap 國內 angular .com 1.9 公司的一個營銷項目用到kendo ui（劍道），很霸氣的名字。 kendo ui的獲取和安裝這裏不重復說明，推薦給大家一個博客，裏面有詳細的說明：http://www.cnblog

Vue結合Element-UI實現多級選單導航欄

在需要加入導航欄的元件內新增麵包屑導航欄，構建出一個可以根據路由動態改變其值的資料變數 { levelList }，迴圈levelList，為每一個item設定點選時的跳轉路由 <el-breadcrumb class = "app-breadcrumb" separator =

kendo ui 實現MVVM

相關推薦