Question

我想创建一个自定义小部件，在其中显示几个小部件。例如，我希望自定义窗口小部件由listview，combobox，calender和menu组成。这可能吗？

我在想的是在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并且可能通过Kendo MVVM初始化它会感觉很奇怪。有更好的方法吗？

Answer 1

是的，有可能，您必须创建一个将生成控件的插件，您可以参考创建插件的方式。 create basic jquery plugin

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

 $.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

使用它的基本设置是在页面中创建一个div，它实际上包含所有其他控件

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

在页面中你可以使用如下控件来创建和绑定控件，如果你想将它绑定到observable中的refresh函数那么，在刷新函数中写下面的代码

$("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' }
]
});

希望这会有所帮助：）

如何在Kendo UI中嵌套自定义小部件？

1 个答案: