美文网首页
初识Kendo

初识Kendo

作者: sarry | 来源:发表于2016-12-12 19:00 被阅读149次
一、知识点了解:在页面数据改变时,更新绑定的数据源
  • 单项数据绑定:指我们先把模板写好,然后把模板和数据整合到一起形成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表示数据源将自动调用保存任何改变的数据项。

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

相关文章

  • 初识Kendo

    一、知识点了解:在页面数据改变时,更新绑定的数据源 单项数据绑定:指我们先把模板写好,然后把模板和数据整合到一起形...

  • schedule

    Kendo UI 如何开始使用Kendo UI?准备文件css > bootstrap.min.css ke...

  • Kendo UI DataSource的模型

    Kendo UI DataSource功能强大,Kendo UI的网格或者其它组件可以根据模型自动生成符合要求的编...

  • Kendo UI知识点学习和使用

    Kendo UI知识点学习和使用 作者:艾志谋时间:2017/10/29版本:1.0 1.Kendo UI实现Gr...

  • Instant Kendo UI Grid.pdf 免费下载

    下载地址:Instant Kendo UI Grid[www.rejoiceblog.com].pdf

  • 带来了解附件上传

    环境介绍 前端框架:Kendo UI后台框架:Spring Boot + Hibernate开发工具:Intell...

  • kendo UI Notification

    Kendo UI 提供了多种显示提示信息的控件,其中Notification最常用也最容易使用。首先在页面上放置一...

  • Kendo UI Chart MVVM 快速入门

    Kendo UI Chart 功能强大,支持各种图形类型, 通过使用series属性可以控制图形的类型和数据的关系...

  • Kendo UI MVVM 不允许模型混合和嵌套

    在使用Kendo UI MVVM封装组件时发现,布局类组件,比如tabstrip中如果嵌套了其它组件,会发生模型嵌...

  • Kendo UI resize的使用

    Kendo UI很多控件在初始化时需要处于可见状态,才能正常显示,否则会出现很多意想不到的情况。不可见的情况包括:...

网友评论

      本文标题:初识Kendo

      本文链接:https://www.haomeiwen.com/subject/vmscmttx.html