开发自定义剑道 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() 函数，因为它不会像您想象的那样绑定对象。相反，关键是使用kendo.bind() 并传入options 作为您的视图模型。

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