开发自定义Kendo ui小部件 [英] Developing custom kendo ui widget

问题描述

如何像下面的示例那样开发自定义窗口小部件:

How can I develop a custom widget behaving like this sample:

http://jsfiddle.net/anilca/u2HF7/

这里是我的入门书，但我无法了解如何定义下拉列表模板并通过更改事件将它们链接在一起.

Here is my kickstart reading, but I could not find out how to define the templates of dropdownlists and link them together by change events.

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

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

       Widget.fn.init.call(this, element, options);

       that._create();
    },
    options: {
       name: "Editable",
       value: " ",
       editable: false
    },
    _create: function() {
       var that = this;
       // create dropdowns from templates and append them to DOM 
    },
    _templates: {
       dropDown: "?"
    }
   });
   ui.plugin(Editable);
})(jQuery);

推荐答案

在您链接的博客之后，只需执行他所做的工作-定义模板，然后在_create()函数中创建下拉列表.不必在每个下拉列表上使用kendo.template()函数，因为它不会像您想象的那样绑定对象.相反，关键是使用kendo.bind()并将options作为您的视图模型传递.

Following the blog you linked, simply do what he did - define your templates then create the drop-downs in your _create() function. It is not necessary to use the kendo.template() function on each drop down list, as it does not bind objects as well as you think it would. Instead, the key is to use kendo.bind() and pass in the options as your view model.

此处是JsBin的工作示例.

Here is a JsBin working example.

// listen for doc ready because this is js bin and my code is not really "in" the HTML
// where I can control it.
$(function() {
  // wrap the widget in a closure. Not necessary in doc ready, but a good practice
  (function($) { 
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        periods = [{ text: "PERIOD: YEAR", value: "YEAR" }, { text: "PERIOD: QUARTER", value: "QUARTER" }],
        quarters = [{ text: "1. Quarter", value: 1 }, { text: "2. Quarter", value: 2 }, { text: "3. Quarter", value: 3 }, { text: "4. Quarter", value: 4 }],
        years = [2011, 2012, 2013, 2014];

    var LinkedDropDowns = Widget.extend({
      init: function(element, options) {
        var that = this;
        Widget.fn.init.call(that, element, options);      
        that._create();
      },
      options: {
        name: "LinkedDropDowns",
        period: "YEAR",
        periods: periods,
        year: 2011,
        years: years,
        yearVisible: true,
        quarter: 1,
        quarters: quarters,
        quarterVisible: false,
        onPeriodChange: function(e) {
          switch(e.sender.value()) {
            case "YEAR":
              this.set("yearVisible", true);
              this.set("quarterVisible", false);
              break;
            case "QUARTER":
              this.set("yearVisible", true);
              this.set("quarterVisible", true);
              break;
            default:
              break;
          }
        },
        onYearChange: function(e) {
          alert(e.sender.value());
        },
        onQuarterChange: function(e) {
          alert(e.sender.value());
        }
      },
      _create: function() {
        var that = this;

        // create dropdowns from templates and append them to DOM
        that.periodDropDown = $(that._templates.periodDropDown);
        that.yearDropDown = $(that._templates.yearDropDown);
        that.quarterDropDown = $(that._templates.quarterDropDown);

        // append all elements to the DOM
        that.element.append(that.periodDropDown)
                    .append(that.yearDropDown)
                    .append(that.quarterDropDown);

        kendo.bind(that.element, that.options);
      },
      _templates: {
        periodDropDown: "<input id='period' data-role='dropdownlist' data-text-field='text' data-value-field='value' data-bind='value: period, source: periods, events: { change: onPeriodChange }' />",
        yearDropDown: "<input id='year' data-role='dropdownlist' data-bind='visible: yearVisible, value: year, source: years, events: { change: onYearChange }' style='width: 90px' />",
        quarterDropDown: "<input id='quarter' data-role='dropdownlist' data-text-field='text' data-value-field='value' data-bind='visible: quarterVisible, value: quarter, source: quarters, events: { change: onQuarterChange }' style='width: 110px' />"
      }
    });

    ui.plugin(LinkedDropDowns);
  })(jQuery);

  $('#dropdowns').kendoLinkedDropDowns();
});

这篇关于开发自定义Kendo ui小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！