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

原创|使用教程|编辑:龚雪|2013-11-19 11:12:22.000|阅读 753 次

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

相关链接:

    Kendo UI Web包含数百个创建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 || "<p><strong>#= data #</strong></p>")

实现一个刷新功能:

    由于绑定到一个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);
}

数据源控件的完整代码:

(function() {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,

    CHANGE = "change";

    var Repeater = Widget.extend({
        init: function(element, options) {
            var that = this;

            kendo.ui.Widget.fn.init.call(that, element, options);
            that.template = kendo.template(that.options.template || "<p><strong>#= data #</strong></p>");

            that._dataSource();
        },
        options: {
            name: "Repeater",
            autoBind: true,
            template: ""
        },
        refresh: function() {
            var that = this,
                view = that.dataSource.view(),
                html = kendo.render(that.template, view);

            that.element.html(html);
        },
        _dataSource: function() {
            var that = this;
            // returns the datasource OR creates one if using array or configuration object

            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();
            });

            if (that.options.autoBind) {
                that.dataSource.fetch();
            }
        }
    });

    ui.plugin(Repeater);

})(jQuery);

    下面是一个演示,有两个组件在这里进行了初始化,第一个是使用一个简单的阵列作为数据源,第二个是使用的远程端点、模板、并声明初始化。

var dataSource = new kendo.data.DataSource({
    data: [ "item1", "item2", "item3" ]
});

kendo.bind($("#container"));

$("#repeater").kendoRepeater({
    dataSource: [ "item1", "item2", "item3" ]
});

组件MVVM Aware

var DATABINDING = "dataBinding",
    DATABOUND = "dataBound",
    CHANGE = "change"    

var Repeater = kendo.ui.Widget.extend({

    init: function(element, options) {
        ...
    },
    options{
        ...
    },

    // events are used by other widgets / developers - API for other purposes
    // these events support MVVM bound items in the template. for loose coupling with MVVM.
    events: [
        // call before mutating DOM.
        // mvvm will traverse DOM, unbind any bound elements or widgets
        DATABINDING,
        // call after mutating DOM
        // traverses DOM and binds ALL THE THINGS
        DATABOUND
    ]
});

项目:

    MVVM将会要我们公有代表着我们组件的每一行或者是每个重复元素的DOM 片段,我们需要返回使用到的对于MVVM的最外层的元素,在通常情况下是this.element.children。由于每个模版项目呈现的是一个与绑定元素相关的DOM片段,我们可以通过使它对项目对象不可用,来对MVVM公有它。

示例:

var DATABINDING = "dataBinding",
    DATABOUND = "dataBound",
    CHANGE = "change"    

var Repeater = kendo.ui.Widget.extend({

    init: function(element, options) {
        ...
    },
    options{
        ...
    },

    // events are used by other widgets / developers - API for other purposes
    // these events support MVVM bound items in the template. for loose coupling with MVVM.
    events: [
        // call before mutating DOM.
        // mvvm will traverse DOM, unbind any bound elements or widgets
        DATABINDING,
        // call after mutating DOM
        // traverses DOM and binds ALL THE THINGS
        DATABOUND
    ],

    // mvvm expects an array of dom elements that represent each item of the datasource.
    // should be the outermost element's children
    items: function() {
        return this.element.children();
    }
});

改变数据源:

// for supporting changing the datasource via MVVM
setDataSource: function(dataSource) {
    // set the internal datasource equal to the one passed in by MVVM
    this.options.dataSource = dataSource;
    // rebuild the datasource if necessary, or just reassign
    this._dataSource();
}

调整 _dataSource:

    对于我们用于指定和创建数据源的方法现在需要做一些调整。

_dataSource: function() {

    var that = this;

    // if the DataSource is defined and the _refreshHandler is wired up, unbind because
    // we need to rebuild the DataSource
    if ( that.dataSource && that._refreshHandler ) {
        that.dataSource.unbind(CHANGE, that._refreshHandler);
    }
    else {
        that._refreshHandler = $.proxy(that.refresh, that);
    }

    // returns the datasource OR creates one if using array or configuration object
    that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
    // bind to the change event to refresh the widget
    that.dataSource.bind( CHANGE, that._refreshHandler );

    if (that.options.autoBind) {    
        that.dataSource.fetch();
    }
}

    果说在之前你没有使用过代理 jQuery 函数,现在可能会有一点混乱,当_refreshHandler被调用时都会被调整,公有刷新组件功能更以及内置的刷新功能也会相应的实现,这个也会引用该组件的本身,并不是其他的类似于窗口的东西。由于关键字的值总是用JS改变,当刷新功能执行的时候,这个是一个好的办法来确保正确的范围。

触发绑定/绑定事件:

    最后我们只需要触发数据绑定和数据绑定事件,在mutate DOM之前以及数据绑定直接发生之后,用公有的刷新和内存实现这个。

refresh: function() {
    var that = this,
        view = that.dataSource.view(),
        html = kendo.render(that.template, view);

    // trigger the dataBinding event
    that.trigger(DATABINDING);

    // mutate the DOM (AKA build the widget UI)
    that.element.html(html);

    // trigger the dataBound event
    that.trigger(DATABOUND);
}

    与此同时,在我们的组件中现在已经完全启用MVVM,这就意味着我们可以像下面这个样自定义组件:

<div data-role="repeater" data-bind="source: dataSource">
<script>
    var viewModel = kendo.observable({
        dataSource:  new kendo.data.DataSource({
            transport: {
                read: "Customers/Orders",
                dataType: "json"
            }
        })  
    });
    kendo.bind(document.body.children, viewModel);
</script>

    以上就是完整的示例了,需要注意的是,当你添加一个项目到数据源的时候,它就会立即反映到中继器组件中。

var viewModel = kendo.observable({
    items: ["item1", "item2", "item3"],
    newItem: null,
    add: function(e) {
        if (this.get("newItem")) {
            this.get("items").push(this.get("newItem"));
        }
    }
});

kendo.bind(document.body, viewModel);

>>>Kendo UI Web下载

 



标签:

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

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

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