javascript - 开发自定义剑道 ui 小部件

Question

我如何开发一个像这个示例一样的自定义小部件:

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

Here is我的 kickstart 读物，但我找不到如何定义下拉列表的模板并通过更改事件将它们链接在一起。

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

Answer 1

按照您链接的博客，只需按照他所做的操作 - 定义您的模板，然后在您的 _create() 函数中创建下拉菜单。没有必要在每个下拉列表上使用 kendo.template() 函数，因为它没有像您想象的那样绑定(bind)对象。相反，关键是使用 kendo.bind() 并传入 options 作为您的 View 模型。

Here是一个 JsBin 工作示例。

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