MVVM对自定义Kendo UI小部件的支持 [英] Mvvm support for custom kendo ui widget
问题描述
几天前，我问了这个问题，得到了一个非常酷的答案.此后，我想知道我是否可以使用我的自定义小工具，因为我使用了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.
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小部件的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
