Durandal 小部件内部函数范围和上下文
Durandal widgets inner function scope and context
我有 durandal 小部件和两个 syncfusion 按钮:
view.html
<div class="group-btn-container">
<input type="checkbox" data-bind="ejToggleButton: toggleButtonNo" />
<input type="checkbox" data-bind="ejToggleButton: toggleButtonYes" />
</div>
viewmodel.js
define(['knockout', 'jquery','web/ej.togglebutton.min', 'common/ej.widget.ko.min'], function (ko, $) {
var ctor = function () { };
ctor.prototype.activate = function (settings) {
self = this;
var toggleBtnYes = {
toggleState: ko.observable(false),
click: function (args) {
self.toggleButtonNo.buttonOptions.toggleState(false);
args.model.toggleState(true);
}
}
self.toggleButtonYes = toggleBtnYes;
var toggleBtnNo = {
toggleState: ko.observable(true),
click: function (args) {
self.toggleButtonYes.buttonOptions.toggleState(false);
args.model.toggleState(true);
}
}
self.toggleButtonNo = toggleBtnNo;
};
return ctor;
});
两个按钮 'Yes' 和 'No',应该像单选按钮一样工作,当一个打开时,另一个应该关闭。
Q1:我对视图模型上下文或范围有疑问。
在点击函数中我没有看到 'self',实际上 self 总是另一个小部件,因为在一个循环中我渲染了几个小部件,我不知道为什么 self 不是我的函数 ctor?
Q2:另外,当我想直接从点击功能访问对象 'toggleBtnNo' 或 'toggleBtnYes' 时,它们未定义。为什么我在内部 'click' 函数中看不到来自全局函数 ctor 的对象?
我只是不知道如何从我的点击功能接近按钮(以一种或另一种方式)我怎样才能改变它的状态?
从您提供的代码片段来看,您似乎正试图通过为模型赋值来更新 toggleButton 的状态。有了这个,模型值就被分配了,并且 没有反映 在 ToggleButton 控件中。
相反,要更新 ToggleButton 控件,您需要更新模块中的可观察变量 (self.toggleButtonNo.toggleState) 中的值并调用 ko.applyBindings 方法,以便模型值将更新 ToggleButton 控件。
请参考下面提供的代码片段。
HTML
<input id="yes" type="checkbox" data-bind="ejToggleButton: {toggleState: toggleButtonYes.toggleState , defaultText: settings.defaultText, activeText: settings.activeText, click: toggleButtonYes.click}" />
<input id="no" type="checkbox" data-bind="ejToggleButton: {toggleState: toggleButtonNo.toggleState, defaultText: settings.defaultText, activeText: settings.activeText, click: toggleButtonNo.click}" />
脚本
define('mo1', ['knockout', 'jquery'], function (ko, $) {
return function () {
self = this;
self.settings = {
defaultText: "No",
activeText: "Yes",
};
var toggleBtnYes = {
toggleState: ko.observable(true),
click: function (args) {
self.toggleButtonNo.toggleState(false);
self.toggleButtonYes.toggleState(true);
ko.applyBindings(self);
}
}
self.toggleButtonYes = toggleBtnYes;
var toggleBtnNo = {
toggleState: ko.observable(false),
click: function (args) {
self.toggleButtonYes.toggleState(false);
self.toggleButtonNo.toggleState(true);
ko.applyBindings(self);
}
}
self.toggleButtonNo = toggleBtnNo;
};
});
这是有史以来最严重的错误。我看了那一百万次,却没有注意到。我很惭愧。
我没有把'var'放在self前面
self = this;
应该是:
var self = this;
这导致 self 进入全局范围,并且每次其他小部件都会覆盖 self 的值。
我有 durandal 小部件和两个 syncfusion 按钮:
view.html
<div class="group-btn-container">
<input type="checkbox" data-bind="ejToggleButton: toggleButtonNo" />
<input type="checkbox" data-bind="ejToggleButton: toggleButtonYes" />
</div>
viewmodel.js
define(['knockout', 'jquery','web/ej.togglebutton.min', 'common/ej.widget.ko.min'], function (ko, $) {
var ctor = function () { };
ctor.prototype.activate = function (settings) {
self = this;
var toggleBtnYes = {
toggleState: ko.observable(false),
click: function (args) {
self.toggleButtonNo.buttonOptions.toggleState(false);
args.model.toggleState(true);
}
}
self.toggleButtonYes = toggleBtnYes;
var toggleBtnNo = {
toggleState: ko.observable(true),
click: function (args) {
self.toggleButtonYes.buttonOptions.toggleState(false);
args.model.toggleState(true);
}
}
self.toggleButtonNo = toggleBtnNo;
};
return ctor;
});
两个按钮 'Yes' 和 'No',应该像单选按钮一样工作,当一个打开时,另一个应该关闭。
Q1:我对视图模型上下文或范围有疑问。 在点击函数中我没有看到 'self',实际上 self 总是另一个小部件,因为在一个循环中我渲染了几个小部件,我不知道为什么 self 不是我的函数 ctor?
Q2:另外,当我想直接从点击功能访问对象 'toggleBtnNo' 或 'toggleBtnYes' 时,它们未定义。为什么我在内部 'click' 函数中看不到来自全局函数 ctor 的对象?
我只是不知道如何从我的点击功能接近按钮(以一种或另一种方式)我怎样才能改变它的状态?
从您提供的代码片段来看,您似乎正试图通过为模型赋值来更新 toggleButton 的状态。有了这个,模型值就被分配了,并且 没有反映 在 ToggleButton 控件中。
相反,要更新 ToggleButton 控件,您需要更新模块中的可观察变量 (self.toggleButtonNo.toggleState) 中的值并调用 ko.applyBindings 方法,以便模型值将更新 ToggleButton 控件。
请参考下面提供的代码片段。
HTML
<input id="yes" type="checkbox" data-bind="ejToggleButton: {toggleState: toggleButtonYes.toggleState , defaultText: settings.defaultText, activeText: settings.activeText, click: toggleButtonYes.click}" />
<input id="no" type="checkbox" data-bind="ejToggleButton: {toggleState: toggleButtonNo.toggleState, defaultText: settings.defaultText, activeText: settings.activeText, click: toggleButtonNo.click}" />
脚本
define('mo1', ['knockout', 'jquery'], function (ko, $) {
return function () {
self = this;
self.settings = {
defaultText: "No",
activeText: "Yes",
};
var toggleBtnYes = {
toggleState: ko.observable(true),
click: function (args) {
self.toggleButtonNo.toggleState(false);
self.toggleButtonYes.toggleState(true);
ko.applyBindings(self);
}
}
self.toggleButtonYes = toggleBtnYes;
var toggleBtnNo = {
toggleState: ko.observable(false),
click: function (args) {
self.toggleButtonYes.toggleState(false);
self.toggleButtonNo.toggleState(true);
ko.applyBindings(self);
}
}
self.toggleButtonNo = toggleBtnNo;
};
});
这是有史以来最严重的错误。我看了那一百万次,却没有注意到。我很惭愧。
我没有把'var'放在self前面
self = this;
应该是:
var self = this;
这导致 self 进入全局范围,并且每次其他小部件都会覆盖 self 的值。