Kendo UI for jQuery使用教程：自定义小部件（二）

本教程主要介绍如何使用Kendo UI通过继承基本窗口小部件类为您提供创建自定义窗口小部件的选项，Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，欢迎大家免费下载最新版！

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Kendo UI通过继承基本窗口小部件类为您提供创建自定义窗口小部件的选项。

处理事件

1. 将更改事件绑定到您的数据源并处理它。在这里您可以根据从数据源读取的数据来更改DOM，通常这是通过刷新方法完成的。将其公开，以便您或其他人能够在初始化后的某个时刻在小部件上调用它。

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

下面的示例演示了小部件代码的外观。 请注意，当您绑定到数据源上的change事件时，实际上是绑定到字符串值“ change”。最佳的做法是在小部件顶部将它们分配为常量，然后引用该常量，整个DataSource配置也移到自己的方法中。这是因为that表示窗口小部件，因为that是调用对象。您可以将that分配给this对象后，引用that对象的所有窗口小部件属性。

(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 an array or a 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();  });  }  });kendo.ui.plugin(Repeater);})(jQuery);  <!--_-->

2. 通过检查that.options的autoBind配置值从数据源获取（如有必要），然后调用that.dataSource.fetch（）。请注意fetch和read不同，因为仅当尚未从DataSource读取数据时，它才会填充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 read on the dataSource if one has not happened yet.  if (that.options.autoBind) {  that.dataSource.fetch();  }  }

3. 将autoBind配置添加到小部件上的options对象，并将其默认值设置为true。 Kendo UI中的所有数据绑定窗口小部件在默认情况下都自动绑定。

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

带有模板的渲染小部件

1. 小部件输出的HTML会在Kendo UI模板上呈现，它们允许您预编译HTML并将经过评估的数据或表达式注入HTML中，并且DOM片段作为HTML字符串返回。Kendo UI中几乎所有的小部件都允许您指定除小部件使用的默认模板之外的某种模板，为此首先将模板添加到options对象，并将其值设置为空字符串。 与其他配置设置相反，请勿在此处设置其默认值。

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

2. 通过直接在基本小部件初始化的调用下添加一行来设置默认值，这将预编译用户传入的模板，或使用默认模板。对于此Repeater，写出封装在段落中strong标签，然后引用数据对象。如果我们传递字符串数组，则该数据对象将是一个字符串。 如果将对象传递给模板，则默认模板将呈现[object Object]。

that.template = kendo.template(that.options.template || "#= data #")

实施刷新功能

1. 由于绑定到change方法，因此需要实现在数据源更改或直接调用时将调用的refresh公共函数。在refresh方法内部，您将要更改DOM。首先调用that.dataSource.view（），它将为您提供来自DataSource的数据；接下来使用kendoRender并将模板与DataSource data—a.k.a.视图一起传递，Kendo UI窗口小部件就是这样改变DOM的。render方法将数据应用于DataSource并返回HTML字符串。

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

2. 设置that.element的HTML —在其上初始化小部件的元素。如果要处理输入的初始化，并且想用容器转换或包装该输入，请在设置HTML之前在此处添加该逻辑。that.element是jQuery包装的元素，因此您可以直接从其中调用html方法。最终的刷新方法类似于下面示例中演示的方法。

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

3. 在上一步中添加了最后的修饰后，现在您有一个完全数据绑定的小部件。 以下示例演示了Repeater小部件的完整代码。

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

以下示例使用两个已初始化的窗口小部件。 第一个将简单数组作为数据源；第二个使用远程端点、模板和声明式初始化。

<div id="repeater"></div><div id="container">  <div data-role="repeater" data-source="dataSource" data-template="template"></div>  </div><script type="text/x-kendo-template" id="template">  <div style="float: left; color: salmon; margin-right: 10px"><h1>#= data.ProductName #</h1></div>  </script><script>  (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({  type: "odata",  transport: {  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"  }  });kendo.bind($("#container"));$("#repeater").kendoRepeater({  dataSource: [ "item1", "item2", "item3" ]  });  </script>

Kendo UI R3 2019全新发布，最新动态请持续关注Telerik中文网！

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯

来源：慧都