0

我想创建一个自定义小部件，它将在其中显示多个小部件。例如，我希望自定义小部件由 a listview、 a combobox、 acalender和 a组成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 初始化的小部件中调用 a 感觉很奇怪。有一个更好的方法吗？

4

1 回答 1

2

是的，有可能，您必须创建一个您自己的插件来生成控件，您可以参考创建插件的方法。 创建基本的jQuery插件

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

 $.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 中的刷新函数，则在刷新函数中编写以下代码

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

希望这可以帮助 ：）

于 2014-08-22T06:18:54.523 回答