Javascript 如何在剑道UI中嵌套自定义小部件？

我想创建一个自定义小部件，在其中显示几个小部件。例如，我希望自定义小部件由一个

列表视图

、一个

组合框

、一个

日历

和一个

菜单

组成。这可能吗

我的想法是在

refresh

方法中添加HTML，然后初始化DOM元素，如下所示。我也想使用MVVM

refresh: function() {
    var that = this,
        view = that.dataSource.view(),
        html = kendo.render(that.template, view);

    // trigger the dataBinding event
    that.trigger(DATABINDING);

    // mutate the DOM (AKA build the widget UI)
    that.element.html(html);

    // is this safe???
    kendo.bind(that.element, { source: this.dataSource });

    // or do this???
    this.element.find('.listview').kendoListView({ dataSource: this.dataSource });

    // trigger the dataBound event
    that.trigger(DATABOUND);
}

---

在一个小部件中调用

kendo.bind

，它可能也通过kendomvvm初始化，这感觉很奇怪。有更好的方法吗？

是的，这是可能的，您必须创建一个插件来生成控件，您可以参考创建插件的方法。

下面的代码只是一个帮助您开始的示例，它不是一个正在运行的代码。您可以修改它并使其按照您的要求运行 我已经为绑定combobox创建了一个示例，您可以用同样的方式添加其他控件

 $.fn.customControl = function (options) {
    var settings = $.extend({}, options);
    return this.each(function () {
        var $this = $(this);

        var comboboxDatasource, listviewDatasource, menuDatasource; // as many controls you want to bind
        $.each(settings.controls, function (index, value) {
            switch (value.type) {
                case "combobox":
                    comboboxDatasource = value.datasource;
                    var $combobox = "<input data-role='combobox' " +
                                               " data-text-field='" + value.textField + "'" +
                                               " data-value-field='" + value.valueField + "'" +
                                               " data-bind='source: '" + value.datasource + "'," +
                                                " events: {" +
                                                " change: onChange," + //pass it in the custom control parameters if you want to have a custom event for the control
                                                " }' />";

                    $this.append($combobox); // Appends a control to the DOM which can be later bound to data using MVVM kendo.observable
                    break;
                case "listview":
                //Create listview and other controls as demo'ed for the combobox.
                    break;
                case "calendar":
                    break;
                case "menu":
                    break;
            }
        });
        //Create the kendo Observable object to bind the controls
        var viewModel = kendo.observable({
            comboboxDatasourceProperty: new kendo.data.DataSource({ //Fetch the datasource for each list control based on the parameters sent
                transport: {
                    read: {
                        url: "url to datasource",
                        dataType: "dataType you want e.g. jsonp"
                    }
                }
            }),
            listviewDatasourceProperty: function () { },
            menuDatasourceProperty: function () { }
        });

        // Bind the View to the div which contains all the other controls
        kendo.bind($($this), viewModel);

    });  // return this.each

};  //customControl

---

希望这有帮助：）

这是一个有趣的方法。我想知道作为

new kendo.View（kendo.observable（{..}））.render（“#customControlDiv”）

来做是否有什么影响。不确定我们是否可以按照您演示的方式来做，我们将检查一下，并让您知道是否有相同的结果。

<div id="customControlDiv"></div>

$("customControlDiv").customControl({    controls: [
    { type:'listview',id:'listviewID',datasource='path to datasource for listview',textField='text',valueField='id' }, //if you want to pass your datasource url, make a prop. and pass the url 
    { type:'combobox',id:'comboboxID',datasource='path to datasource for combobox',textField='id',valueField='id' },   // which can be accessed in the plugin to fetch datasource
    { type:'calendar',:'calenderID',datasource='',textField='',valueField='' },
    { type:'menu',id:'menuID',datasource='path to datasource for menu',textField='text',valueField='id' }
]
});