Mvvm支持自定义kendo ui小部件
前几天我问了这个问题并得到了一个非常酷的答案。 此后我想知道我是否可以使用我的自定义小部件，因为我使用mvvm约定的所有标准kendo组件。 我需要编辑自定义小部件的哪些部分？ 例如：
谢谢，
我认为你可能会遇到内部视图模型方法的问题，因为Kendo UI往往不善于嵌套视图模型绑定。 据我所知，所有Kendo UI小部件都因此而在代码中创建了内部小部件。
旁注：在您的小部件中，您使用DOM ID作为下拉元素 – 如果您要在同一页面上创建多个小部件，这将创建重复项。 在这种情况下，最好使用类。
要启用year绑定，您需要一个自定义绑定器 ，它可能如下所示：
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); } });
这适用于提供这些访问器的小部件：
getYear: function () { return this._getWidget("year").value(); }, setYear: function (value) { this._getWidget("year").value(value); console.log(this._getWidget("year")); }
完整的小部件示例（请注意，它没有完全实现 – 它只考虑年份绑定和期间设置）：
(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: "", yearDropDown: "", quarterDropDown: "" }, getYear: function () { return this._getWidget("year").value(); }, setYear: function (value) { this._getWidget("year").value(value); console.log(this._getWidget("year")); } }); ui.plugin(LinkedDropDowns); })(jQuery);
（ 演示 ）
不需要对窗口小部件进行额外编码。 要为声明性初始化启用窗口小部件，您可以执行以下操作：
HTML
这些数据属性将覆盖窗口小部件中的“YEAR”和“2011”的默认选项。
JavaScript的
(function() { kendo.init($('body')); })();
不要调用$('#dropdowns').kendoLinkedDropDowns() ，只需调用kendo.init() ，小部件就可以自行绑定。
这是更新的工作JSBin示例。