Chinaunix首页 | 论坛 | 博客
  • 博客访问: 72418
  • 博文数量: 40
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 368
  • 用 户 组: 普通用户
  • 注册时间: 2013-03-12 16:17
文章分类

全部博文(40)

文章存档

2013年(40)

我的朋友

分类: 其他平台

2013-11-19 11:36:58

 包 含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。在前面的2篇文章《HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件》中,已经对在Kendo UI Web中如何创建自定义组件的方法和步骤做了一些的讲解,本文将完成所有的内容。

模板绘制控件

    通过Kendo UI的Templates渲染进行HTML输出,Kendo UI Templates允许你编译HTML和注入数据或表达式到被评估以及作为一个HTML字符串返回的DOM片段的HTML中。在

    Kendo UI中的所有组件都允许指定一种除组件使用的默认模版之外的模版。要指定模版,需要首先添加模版到选择对象中,并设置它的值为一个空的字符串,相反其他的配置设置,我们不会在这里设置它的默认值。

添加模版到选项:

 options: {  
        name: "Repeater",  
        autoBind: true,  
        template: "" } 

设置这个模版的默认值:

that.template = kendo.template(that.options.template || "

#= data #

")

实现一个刷新功能

    由于绑定到一个change方法,现在需要实现当DataSource改变或者是被直接调用的时候,这个refresh public函数会被调用,这个刷新方法就是我将要mutate DOM的地方。首先需要做的事情就是调用我们来自DataSource数据的that.dataSource.view(),接下来就是使用 kendoRender,并随着DataSource数据通过一个模版,这个就是Kendo UI组件mutate DOM的方法。渲染方法应用数据到数据源并返回HTML字符串

公有Refresh Function:

复制代码
refresh: function() { var that = this,  
            view = that.dataSource.view(),  
            html = kendo.render(that.template, view);  
    }  
    Mutate  DOM Element HTML:  
    refresh: function() { var that = this,  
            view = that.dataSource.view(),  
            html = kendo.render(that.template, view);  
       
        that.element.html(html);  
    } 

>>

>>

阅读(1060) | 评论(0) | 转发(0) |
0

上一篇:HTML5 UI框架Kendo UI Web自定义组件(一)

下一篇:没有了

给主人留下些什么吧!~~