javascript - Kendo 自定义小部件返回空实例

Question

在剑道中创建自定义小部件我的 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. 我们实际上可以获得引用，但使用正确的 id，当我试着探索它并检查一下。

此外，您的 dom 现在看起来像这样(也许这也是导致问题的原因)

注意:您可以使用标有蓝线的 id 选择小部件引用。 我知道这不是答案，我只是想指出一些方向，以防您仍想继续使用您的小部件。我认为其他人想在这方面帮助他更多，请使用这个 dojo