初识Kendo

2016-12-12 本文已影响149人 sarry

一、知识点了解：在页面数据改变时，更新绑定的数据源

单项数据绑定：指我们先把模板写好，然后把模板和数据整合到一起形成html代码，再把这段html代码插入到文档流中区

特性：html一旦生成以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的html代码去掉，再把新的数据和模板一起整合后插入到文档流中。

双向绑定：数据模型（Model）和视图（View）之间的双向绑定。

特性：用户在视图上的修改会自动同步到数据模型中去，同样，如果数据模型中的值发生了变化，也会立刻同步到视图中去

二、kendo数据绑定

思路是通过在数据对象上定义get和set方法，调用时手动调用set或get数据，改变数据后触发UI层的渲染操作；以视图驱动数据变化的场景主要应用于input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等来触发事件改变数据层的数据。整个过程均通过函数调用方法完成。

Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ，这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性。

以attr方法为例：

<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
    imageSource: "http://www.kendoui.com/image/kendo-logo.png",
    imageAlt: "Kendo Logo"
});

kendo.bind($("#logo"), viewModel);
</script>

image 元素的 src 和 alt 属性被绑定到 viewModel 对象的 imageSource 和 imageAlt 属性。当调用 kendo.bind 方法，image 元素和下面 HTML 元素等效：

其他绑定方法和attr大同小异！

三、Kendo DataSource

kendo的数据源支持本地数据（Javascript对象数组），或者远程数据源（XML、JSON、JSONP），支持CRUD操作（创建、读取、更新和删除操作）。
于是就想访问一个万屏汇的接口试一下，如果直接访问万屏汇接口会报错，因为kendo里面的一些方法是针对返回的数据为数组来操作的（而我们的接口返回的是对象）。所以通过现有的环境为基础，运用mock数据，重新做了一个b44的接口数据。
1.首先运用Browsersync.cn来访问本地服务器。查看Browsersync的安装步骤及好处点击http://www.browsersync.cn/
2.在将返回的格式改为数组
3.格式为：

<script>
var dataSource = new kendo.data.DataSource({
  autoSync: true,
  transport: {
    read:  {
      
      url: "http://m2.xxtao.com:2080/index.php?r=demand%2Fb44&demand_id=10590",
      dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://m2.xxtao.com:2080/index.php?r=demand%2Fb44&demand_id=10590",
      dataType: "json" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    data: "data", //ajax返回的对象
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  alert(product.now)
  
});
</script>

4.获取数据的长度为dataSource.view().length ；

我本以为能够将json返回来的数据通过kendo提供的数据绑定data-bind方法绑定在dom元素上，但是找遍了示例并没有找到，看来数据绑定和DataSource没有什么关系。而通过DataSource的数据是通过模板来渲染，我觉得和mustach有些相似。

四、结论

通过这几天的认识我觉得Kendo可能并不是太适用：

对于双向数据绑定来说，由于是自动管理状态，会有很多不得不手动处理的状态，这样便增加了复杂度
里面的UI其实就是jquery的一些插件，只是被kendo封装了一下，但还是原汤原料
先不说移动端，web端一些ui并不兼容ie8以下（开始还很兴奋，想着他是如何做到让html5兼容ie8的）
DataSource的形式和mustach比较像，我觉得并不需要抛弃mustach

五、其他一些小方法

获取iframe可视区域的高度 $(window.parent).height()
1.refresh方法
2.datasource 中请求接口的数据时,获取数据要用view()方法。例如：
获取条数的个数方法为： dataSource.view().length ;
获取第一条数据的内容：dataSource.view[0].name;
3.filter 设置数据过滤器
4.sync 默认值为false。如果设置为true表示数据源将自动调用保存任何改变的数据项。

！！！以上文章大部分属于我个人观点，如果有错误之处，希望帮忙指出！