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;
});
两个按钮"是"answers"否"应该像单选按钮一样工作,当一个打开时,另一个应该关闭。
Q1:我对视图模型上下文或范围有问题。在点击函数中,我没有看到"self",实际上self总是另一个小部件,因为在一个循环中,我渲染了几个小部件,我不知道为什么self不是我的函数ctor?
Q2:另外,当我想直接从点击函数接近对象"toggleBtnNo"或"toggle BtnYes"时,它们没有定义。为什么我在内部的"点击"函数中看不到全局函数ctor中的对象?
我只是不知道如何从我的点击功能中接近按钮(以这样或那样的方式),我如何才能改变它的状态?
从您提供的代码片段中,您似乎正试图通过为模型赋值来更新toggleButton的状态。这样,模型值仅被分配,并且不会反映在ToggleButton控件中。
相反,要更新ToggleButton控件,您需要更新模块中可观察变量(self.toggleButtonNo.thoggleState)中的值,并调用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的值。
相关文章:
- 将函数的上下文应用于javascript变量
- 正在全局范围中查找JavaScript函数
- 如何通过数组更新角度子范围
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 使用JQuery的动态上下文菜单
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 如何访问UIWebView'的子窗口上下文
- HTML范围:动态设置值属性
- "实例范围”;TypeScript类的getter/setter
- 构造函数函数中的自执行函数的OO上下文/范围
- 如何更改对 javascript 属性的调用的范围/上下文
- JavaScript 范围和执行上下文
- ES6 循环和 forEach 中的上下文和变量范围
- 更改 Ember.ComputedProperty 的上下文/范围
- 新手:Javascript构造函数和范围上下文问题
- Javascript/jQuery 范围和上下文问题,当试图操作对象的“引用”时
- 术语执行上下文和范围之间是否有区别?
- 如何访问对象上下文和范围
- Durandal小部件的内部功能范围和上下文
- 功能范围和上下文的差异