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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

Kendo UI通過繼承基本窗口小部件類為您提供創(chuàng)建自定義窗口小部件的選項。

處理事件

1. 將更改事件綁定到您的數(shù)據(jù)源并處理它。在這里您可以根據(jù)從數(shù)據(jù)源讀取的數(shù)據(jù)來更改DOM，通常這是通過刷新方法完成的。將其公開，以便您或其他人能夠在初始化后的某個時刻在小部件上調(diào)用它。

// Bind to the change event to refresh the widget.

  that.dataSource.bind("change", function() {
that.refresh();
});

下面的示例演示了小部件代碼的外觀。 請注意，當您綁定到數(shù)據(jù)源上的change事件時，實際上是綁定到字符串值“ change”。最佳的做法是在小部件頂部將它們分配為常量，然后引用該常量，整個DataSource配置也移到自己的方法中。這是因為that表示窗口小部件，因為that是調(diào)用對象。您可以將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配置值從數(shù)據(jù)源獲取（如有必要），然后調(diào)用that.dataSource.fetch（）。請注意fetch和read不同，因為僅當尚未從DataSource讀取數(shù)據(jù)時，它才會填充DataSource。如果在初始化小部件之前在DataSource上調(diào)用了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對象，并將其默認值設(shè)置為true。 Kendo UI中的所有數(shù)據(jù)綁定窗口小部件在默認情況下都自動綁定。

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

帶有模板的渲染小部件

1. 小部件輸出的HTML會在Kendo UI模板上呈現(xiàn)，它們允許您預(yù)編譯HTML并將經(jīng)過評估的數(shù)據(jù)或表達式注入HTML中，并且DOM片段作為HTML字符串返回。Kendo UI中幾乎所有的小部件都允許您指定除小部件使用的默認模板之外的某種模板，為此首先將模板添加到options對象，并將其值設(shè)置為空字符串。 與其他配置設(shè)置相反，請勿在此處設(shè)置其默認值。

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

2. 通過直接在基本小部件初始化的調(diào)用下添加一行來設(shè)置默認值，這將預(yù)編譯用戶傳入的模板，或使用默認模板。對于此Repeater，寫出封裝在段落中strong標簽，然后引用數(shù)據(jù)對象。如果我們傳遞字符串數(shù)組，則該數(shù)據(jù)對象將是一個字符串。 如果將對象傳遞給模板，則默認模板將呈現(xiàn)[object Object]。

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

實施刷新功能

1. 由于綁定到change方法，因此需要實現(xiàn)在數(shù)據(jù)源更改或直接調(diào)用時將調(diào)用的refresh公共函數(shù)。在refresh方法內(nèi)部，您將要更改DOM。首先調(diào)用that.dataSource.view（），它將為您提供來自DataSource的數(shù)據(jù)；接下來使用kendoRender并將模板與DataSource data—a.k.a.視圖一起傳遞，Kendo UI窗口小部件就是這樣改變DOM的。render方法將數(shù)據(jù)應(yīng)用于DataSource并返回HTML字符串。

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

2. 設(shè)置that.element的HTML —在其上初始化小部件的元素。如果要處理輸入的初始化，并且想用容器轉(zhuǎn)換或包裝該輸入，請在設(shè)置HTML之前在此處添加該邏輯。that.element是jQuery包裝的元素，因此您可以直接從其中調(diào)用html方法。最終的刷新方法類似于下面示例中演示的方法。

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

3. 在上一步中添加了最后的修飾后，現(xiàn)在您有一個完全數(shù)據(jù)綁定的小部件。 以下示例演示了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);

以下示例使用兩個已初始化的窗口小部件。 第一個將簡單數(shù)組作為數(shù)據(jù)源；第二個使用遠程端點、模板和聲明式初始化。

<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>

掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊