Question

如何开发与此示例类似的自定义窗口小部件：

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

开发自定义kendo ui小部件

1 个答案: