KendoUI - UI 提取重复函数后未刷新
KendoUI - UI not refreshed after extracting repeating functions
我有一个视图模型,它有几个带有一些重复逻辑的集合属性。
我需要能够添加一个新的空对象,删除一个对象,并确保每个集合至少有一个对象,如果它是唯一的对象,应该禁用 "Delete" 按钮。
为了提取这些常用函数,我扩展了 kendo.data.ObservableArray
:
function addEmpty() {
this.push({});
}
function hasMoreThanOne {
return this.length > 1;
}
var CoolObservableArray = kendo.data.ObservableArray.extend({
init: function(data) {
kendo.data.ObservableArray.fn.init.call(this, data);
this.addEmpty = addEmpty.bind(this);
this.hasMoreThanOne = hasMoreThanOne.bind(this);
}
});
问题出在 hasMoreThanOne
函数上。当我创建一个包含单个元素的数组时,"Delete" 按钮被禁用 - 没关系 - 但当我添加新元素时,它不会被启用。
要刷新UI需要调用kendo的get
函数,但是需要一个参数引用属性的名字,这个参数会因人而异CoolObservableArray
的每个实例,所以我需要为每个集合编写重复函数,如 deleteXXXEnabled
、deleteYYYEnabled
等。如何避免它?
这里是有问题重现的fiddle:http://dojo.telerik.com/AFOMa/2
源绑定仅呈现您添加到 ObservableArray
的新对象,因为通知绑定的更改事件仅指示添加了新项目。
您可以通过手动触发更改事件强制源绑定重新呈现整个视图:
var CoolObservableArray = kendo.data.ObservableArray.extend({
init: function (data, type) {
kendo.data.ObservableArray.prototype.init.call(this, data, type);
this.addEmpty = addEmpty.bind(this);
this.deleteObject = deleteObject.bind(this);
this.hasMoreThanOne = hasMoreThanOne.bind(this);
this.bind("change", function (e) {
if (e.action === "add" || e.action === "remove") {
var that = this;
// trigger another change which is not an "add"
// or "remove" or "itemchange" action
setTimeout(function () {
that.trigger("change");
}, 5);
}
});
}
});
var viewModel = kendo.observable({
wares: new CoolObservableArray([
{title: "hampton sofa", price: 989}
])
});
kendo.bind("#waresWrapper", viewModel);
我有一个视图模型,它有几个带有一些重复逻辑的集合属性。 我需要能够添加一个新的空对象,删除一个对象,并确保每个集合至少有一个对象,如果它是唯一的对象,应该禁用 "Delete" 按钮。
为了提取这些常用函数,我扩展了 kendo.data.ObservableArray
:
function addEmpty() {
this.push({});
}
function hasMoreThanOne {
return this.length > 1;
}
var CoolObservableArray = kendo.data.ObservableArray.extend({
init: function(data) {
kendo.data.ObservableArray.fn.init.call(this, data);
this.addEmpty = addEmpty.bind(this);
this.hasMoreThanOne = hasMoreThanOne.bind(this);
}
});
问题出在 hasMoreThanOne
函数上。当我创建一个包含单个元素的数组时,"Delete" 按钮被禁用 - 没关系 - 但当我添加新元素时,它不会被启用。
要刷新UI需要调用kendo的get
函数,但是需要一个参数引用属性的名字,这个参数会因人而异CoolObservableArray
的每个实例,所以我需要为每个集合编写重复函数,如 deleteXXXEnabled
、deleteYYYEnabled
等。如何避免它?
这里是有问题重现的fiddle:http://dojo.telerik.com/AFOMa/2
源绑定仅呈现您添加到 ObservableArray
的新对象,因为通知绑定的更改事件仅指示添加了新项目。
您可以通过手动触发更改事件强制源绑定重新呈现整个视图:
var CoolObservableArray = kendo.data.ObservableArray.extend({
init: function (data, type) {
kendo.data.ObservableArray.prototype.init.call(this, data, type);
this.addEmpty = addEmpty.bind(this);
this.deleteObject = deleteObject.bind(this);
this.hasMoreThanOne = hasMoreThanOne.bind(this);
this.bind("change", function (e) {
if (e.action === "add" || e.action === "remove") {
var that = this;
// trigger another change which is not an "add"
// or "remove" or "itemchange" action
setTimeout(function () {
that.trigger("change");
}, 5);
}
});
}
});
var viewModel = kendo.observable({
wares: new CoolObservableArray([
{title: "hampton sofa", price: 989}
])
});
kendo.bind("#waresWrapper", viewModel);