開發定製劍道UI部件

Question

我如何開發自定義窗口小部件行爲就像這個示例：

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

Here is我Kickstart中讀書，但我無法找出如何界定dropdownlists的模板，並將其鏈接一起改變事件。

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