Durandal小部件内部功能范围和上下文

时间:2016-07-26 23:12:00

标签: javascript durandal syncfusion

我有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;
});

两个按钮&#39;是&#39;并且&#39; No&#39;,应该像单选按钮一样工作,当一个打开时,另一个应该关闭。

Q1:我遇到了viewodel上下文或范围问题。 内部点击功能我没有看到&#39; self&#39 ;,实际上self总是另一个小部件,因为在一个循环中我渲染了几个小部件,我不知道为什么self不是我的函数ctor?

Q2:当我想要接近对象时,切换到没有&#39;或者&#39; toggleBtnYes&#39;直接来自点击功能,它们没有定义。为什么我无法在内心看到来自全局函数ctor的对象,点击&#39;功能

我只是不知道如何从我的点击功能接近按钮(在一个或另一个方向上)我如何改变状态?

2 个答案:

答案 0 :(得分:0)

从您提供的代码段中,您似乎正在尝试通过为模型分配值来更新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;
        };
    });

答案 1 :(得分:0)

这是有史以来最严重的错误。我看了那么多次并且没有注意到。我很惭愧。

我没有把&#39; var&#39;在自我面前。

self = this;  

应该是:

var self = this;

它导致self进入全局范围,每次其他一些小部件都会覆盖self的值。