本文介绍了MVVM对自定义Kendo UI小部件的支持的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

几天前,我问了这个问题,得到了一个非常酷的答案.此后,我想知道我是否可以使用我的自定义小工具,因为我使用了mvvm约定的所有标准剑道组件.我必须编辑自定义窗口小部件的哪些部分?例如:

A few days before I asked this question and got a really cool answer. Hereafter I wonder if I can use my custom widget as I use all standart kendo components by mvvm convention. And what parts of custom widget do I have to edit? For example:

<div id="dropdowns" data-role="linkeddropdowns" data-period="YEAR" 
    data-bind="year: selectedYear"></div>

谢谢

推荐答案

我认为您可能会遇到内部视图模型方法的问题,因为Kendo UI往往不太擅长嵌套视图模型绑定.据我所知,所有Kendo UI小部件都因此在代码中创建了其内部小部件.

I think you may run into problems with the internal view model approach because Kendo UI tends to not be good about nesting view model bindings.As far as I know, all Kendo UI widgets create their internal widgets in code because of that.

侧面说明:在窗口小部件中,您将DOM ID用于下拉列表元素-如果要在同一页面上创建多个窗口小部件,则会创建重复项.在这种情况下,最好使用类.

Side note: in your widget, you were using DOM ids for the dropdown elements - this would create duplicates if you were to create multiple of your widgets on the same page. It's better to use classes in that case.

要启用year绑定,您需要自定义活页夹,看起来可能像这样:

To enable a year binding, you'll need a custom binder, which might look something like this:

kendo.data.binders.widget.year = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);

        var that = this;
        that.element.bind("change", function () {
            that.change(); //call the change function
        });
    },
    refresh: function () {
        var that = this,
            value = that.bindings.year.get();

        this.element.setYear(value);
    },
    change: function () {
        var value = this.element.getYear();
        this.bindings.year.set(value);
    }
});

这将与提供这些访问器的小部件一起使用:

This would work with a widget that provides these accessors:

getYear: function () {
    return this._getWidget("year").value();
},

setYear: function (value) {
    this._getWidget("year").value(value);
    console.log(this._getWidget("year"));
}

完整的小部件示例(请注意,它尚未完全实现-仅考虑了年份绑定和期间设置):

Complete widget example (note that it's not fully implemented - it only takes into account the year binding and the period setting):

(function ($) {
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,
        periods = [
            { text: "PERIOD: YEAR", value: "YEAR" },
            { text: "PERIOD: QUARTER", value: "QUARTER" }
        ],
        quarters = [
            { text: "1. Quarter", value: 1 },
            { text: "2. Quarter", value: 2 },
            { text: "3. Quarter", value: 3 },
            { text: "4. Quarter", value: 4 }
        ],
        years = [2011, 2012, 2013, 2014];

    var LinkedDropDowns = Widget.extend({
        init: function (element, options) {
            var that = this,
                periodOption = $(element).data("period");
            if (periodOption) {
                this.options.period = periodOption;
            }

            Widget.fn.init.call(that, element, options);
            that._create();

          // make sure view state is correct depending on selected period
          this._getWidget("period").trigger("change");
        },

        options: {
            name: "LinkedDropDowns",
            period: "YEAR",
            periods: periods,
            year: 2011,
            years: years,
            quarter: 1,
            quarters: quarters,
            selectedYear: 2011
        },

        onPeriodChange: function (e) {
            switch (e.sender.value()) {
                case "YEAR":
                    $(this._getWidget("year").wrapper).show();
                    $(this._getWidget("quarter").wrapper).hide();
                    break;
                case "QUARTER":
                    $(this._getWidget("year").wrapper).show();
                    $(this._getWidget("quarter").wrapper).show();
                    break;
                default:
                    break;
            }
        },

        onChange: function () {
            // trigger change so the binder knows about it
            this.trigger("change", { sender: this }); 
        },

        _getWidget: function (name) {
            var el = $(this.element).find("input." + name).first();
            return el.data("kendoDropDownList");
        },

        _create: function () {
            var that = this;

            // create dropdowns from templates and append them to DOM
            that.periodDropDown = $(that._templates.periodDropDown);
            that.yearDropDown = $(that._templates.yearDropDown);
            that.quarterDropDown = $(that._templates.quarterDropDown);

            // append all elements to the DOM
            that.element.append(that.periodDropDown)
                .append(that.yearDropDown)
                .append(that.quarterDropDown);

            $(this.element).find(".period").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                value: this.options.period,
                change: this.onPeriodChange.bind(that),
                dataSource: this.options.periods
            });

            $(this.element).find(".year").kendoDropDownList({
                dataSource: this.options.years,
                change: this.onChange.bind(this)
            });

            $(this.element).find(".quarter").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: this.options.quarters

            });
        },

        _templates: {
            periodDropDown: "<input class='period' />",
            yearDropDown: "<input class='year' style='width: 90px' />",
            quarterDropDown: "<input class='quarter' style='width: 110px' />"
        },

        getYear: function () {
            return this._getWidget("year").value();
        },

        setYear: function (value) {
            this._getWidget("year").value(value);
            console.log(this._getWidget("year"));
        }
    });

    ui.plugin(LinkedDropDowns);
})(jQuery);

(演示)

这篇关于MVVM对自定义Kendo UI小部件的支持的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-13 16:52