剑道自定义部件返回空实例

Question

创建自定义的Widget在剑道我的js文件看起来像

(function(kendo, $) { 
    var ui = kendo.ui, 
     Widget = ui.Widget 
    kendo.generateUUID = function() { 
     var d = new Date().getTime(); 
     if (typeof performance !== 'undefined' && typeof performance.now === 'function') { 
      d += performance.now(); //use high-precision timer if available 
     } 
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 
      var r = (d + Math.random() * 16) % 16 | 0; 
      d = Math.floor(d/16); 
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); 
     }); 
    } 


    var ArcDropDownTreeView = kendo.ui.Widget.extend({ 
     _treeView: null, 
     _uid: null, 
     _dropdown: null, 
     init: function(element, options) { 
      var that = this; 
      kendo.ui.Widget.fn.init.call(that, element, options); 
      // Widget.fn.init.call(this.element, options); 

      var newDivId, 
       treeElementId, 
       treeElement, 
       treeview, 
       dropDownElementId, 
       dropDownElement, 
       dropdown 
      uid = kendo.generateUUID(); 
      newDivId = ("treeDropDown{0}").replace("{0}", uid); 
      treeElementId = ("treeViewElement{0}").replace("{0}", uid); 
      dropDownElementId = ("dropDownElement{0}").replace("{0}", uid); 
      var newDiv = $("<div></div>").prop("id", newDivId); 
      dropDownElement = $("<input/>").prop("id", dropDownElementId); 
      treeElement = $(element).clone().prop("id", treeElementId); 
      $(newDiv).append(dropDownElement).change(); 
      $(newDiv).append(treeElement).change(); 
      $(element).append(newDiv).change(); 
      dropdown = $(dropDownElement).kendoDropDownList({ 
       dataSource: [{ 
        text: "", 
        value: "" 
       }], 
       dataTextField: "text", 
       dataValueField: "value", 

      }).data("kendoDropDownList"); 
      dropdown.bind("open", function(e) { 
       e.preventDefault(); 
       // If the treeview is not visible, then make it visible. 
       if (!$treeviewRootElem.hasClass("k-custom-visible")) { 
        $treeviewRootElem.slideToggle('fast', function() { 
         dropdown.close(); 
         $treeviewRootElem.addClass("k-custom-visible"); 
        }); 
       } 
      }); 


      var $dropdownRootElem = $(dropDownElement).closest("span.k-dropdown"); 
      treeview = $(treeElement).kendoTreeView(options.treeview).data("kendoTreeView"); 
      treeview.bind("select", function(e) { 
       // When a node is selected, display the text for the node in the dropdown and hide the treeview. 
       $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text()); 
       $treeviewRootElem.slideToggle('fast', function() { 
        $treeviewRootElem.removeClass("k-custom-visible"); 
       }); 
      }); 
      var $treeviewRootElem = $(treeElement).closest("div.k-treeview"); 
      // Hide the treeview. 
      var listBackgroundCss = dropdown.list.css("background-color"); 
      $treeviewRootElem 
       .width($dropdownRootElem.width()) 
       .css({ 
        "border": "1px solid grey", 
        "display": "none", 
        "position": "absolute", 
        "background-color": listBackgroundCss, 
        "z-index": "999" 
       }); 


      $(document).click(function(e) { 
       // Ignore clicks on the treetriew. 
       if ($(e.target).closest("div.k-treeview").length == 0) { 
        // If visible, then close the treeview. 
        if ($treeviewRootElem.hasClass("k-custom-visible")) { 
         $treeviewRootElem.slideToggle('fast', function() { 
          $treeviewRootElem.removeClass("k-custom-visible"); 
         }); 
        } 
       } 
      }); 
      that._treeView = treeview; 
      that._dropdown = dropdown; 
      that._uid = uid; 
     }, 
     treeView: function() { 
      console.log("Request for treeview"); 
      return this._treeView; 
     }, 
     dropDown: function() { 
      return this._dropdown; 
     }, 
     dataSource: function() { 
      return this.treeview.datasource; 
     }, 
     selectElement: function(id) { 
      this._treeView.select(id); 

     }, 
     options: { 
      name: "ArcDropDownTreeView" 
     } 
    }); 
    ui.plugin(ArcDropDownTreeView); 


})(window.kendo, window.kendo.jQuery); 

当我执行该代码

var dropDownTreeView = $("#treeview").kendoArcDropDownTreeView({ 
    treeview: { 
     dataTextField: "Name", 
     dataValueField: "ID", 
     loadOnDemand: true, 
     dataSource: new kendo.data.HierarchicalDataSource({ 
      transport: { 
       read: { 
        url: '/Inventory/GetInventoryLocation', 
        dataType: "json", 
        data: rootData(), 
        contentType: 'application/json; charset=utf-8' 
       } 
      }, 
      schema: { 
       model: { 
        id: "ID", 
        name: "Name", 
        hasChildren: "hasChildren" 
       } 
      } 
     }) 
    } 
}); 
var instance = dropDownTreeView.data("ArcDropDownTreeView"); 
instance.selectElement(258); 

我得到instance.selectElement空误差（258 ）;看起来dropDownTreeView.data（“ArcDropDownTreeView”）返回一个未定义的实例，我错过了什么？把我的头发拉出来，我创建的任何新窗口小部件都具有相同的行为，但所有窗口小部件框架都基于https://github.com/jsExtensions/kendoui-extended-api，它们将运行。

Answer 1

1. 出于某种原因，在代码中某处你更改元素的ID成为treeViewElement13080b8d-5b18-45ec-bb1f-254701a05b5e（即随机GUID）
2. 嗯，你甚至不能现在选择元素，你怎么指望如果你甚至不能选择元素，那么获取对小部件的引用？
3. 我们实际上可以得到的参考，但与正确的编号，当我试图探索它并检查了这一点。

而且您选择DOM看起来现在这个样子（这也许是导致该问题也一样）

注意：您可以使用标有蓝线的ID选择控件参考。 我知道这不是答案，我只是想指出一些方向，以防万一你仍想继续你的小部件。如果有其他人希望帮助他更多的请使用这个dojo