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

Kendo UI for jQuery最新試用版下載

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: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
  }
  });
kendo.bind($("#container"));
$("#repeater").kendoRepeater({
  dataSource: [ "item1", "item2", "item3" ]
  });
  </script>

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊