HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(二)

原创|使用教程|编辑:龚雪|2013-11-15 10:43:52.000|阅读 1034 次

概述:Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。在前面的文章《HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(二)》中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容。

相关链接:

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。

    在前面的文章《HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(二)》中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容。

使用一个数据源

    现在如果想要实现一个数据源组件或是MVVM aware模式,需要再执行一些其他的步骤。 在下面将会创建一个DataSource aware组件,要使DataSource aware有数据源,首先需要在DataSource基础对象上使用create convenience方法。

创建或初始化数据源:

that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

    这一行代码主要是为你的组件数据源提供了比较灵活的方式,这个样子你就不用创建一个新的数据源来绑定到组件上。

数据源作为数组:

$("#div").kendoRepeater({
    dataSource: ["Item 1", "Item 2", "Item 3"]
});

    如果你传递一个简单的数组, kendo.data.DataSource.create方法将会为你创建一个新的基于数组数据的DataSource,并返回到that.dataSource。你也可以通过指定它内嵌的配置值来新建一个datasource。

将数据源作为配置对象:

$("#div").kendoRepeater({
    dataSource: {
        transport: {
            read: {
                url: "http://mydomain/customers"
            }
        }
    }
});

    这里正在设置数据源的配置,但是并没有创建一个实例。这个kendo.data.DataSource.create(that.options.dataSource)将会获得这个配置对象,并用指定的配置返回一个新的DataSource实例。现在已经提供了相同的灵活性,在我们自己的组件中尽可能多的方式对repeater组件指定DataSource。

Handling Events

    接下来需要做的就是绑定到DataSource change事件并处理它。在这里你将会基于从DataSource读取的数据改变你的DOM。通常可以用一个刷新的方法。一般都会公用这个刷新的方法,主要由于在初始化后,你和其他人可能会在组件或某个节点上调用这个高性能。

绑定到Change Event:

// bind to the change event to refresh the widget
that.dataSource.bind("change", function() {
    that.refresh();
});

有Change Event的组件:

(function($) {

    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        CHANGE = "change";

    var Repeater = kendo.ui.Widget.extend({
        init: function(element, options) {
            var that = this;
            kendo.ui.Widget.fn.init.call(that, element, options);
            // initialize or create dataSource
            that._dataSource();
        },
        options: {
            name: "Repeater"
        },
        _dataSource: function() {
            var that = this;
            // returns the datasource OR creates one if using array or configuration
            that.dataSource = kendo.data.DataSource.create(that.option.dataSource);

            // bind to the change event to refresh the widget
            that.dataSource.bind(CHANGE, function() {
                that.refresh();
            });
        }
    });

    kendo.ui.plugin(Repeater);

})(jQuery);

    现在需要向_dataSource方法添加一些东西,如果需要的话将会从DataSource中提取。通过检查that.options的自动绑定配置值可以实现。接下来是调用that.dataSource.fetch(),需要注意的是,这个fetch和read是不同的,如果这个DataSource还没有被读取,fetch会只会填充DataSource。如果在组件被初始化之前,在DataSource上read已经被调用了的话,那么DataSource就不会再次被读取了。

_dataSource: function() {
    var that = this;

    // returns the datasource OR creates one if using array or configuration
    that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

    // bind to the change event to refresh the widget
    that.dataSource.bind(CHANGE, function() {
        that.refresh();
    });

    // trigger a read on the dataSource if one hasn't happened yet
    if (that.options.autoBind) {
        that.dataSource.fetch();
    }
}

    这个自动绑定配置选项还不存在,现在需要添加它到组件上的选项对象中,并赋予一个默认的值为true。在默认的情况下,Kendo UI中所有的DataBound组件都会自动绑定。

为选项添加AutoBind:

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

>>>Kendo UI Web下载



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

购物车 在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat