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

【问题标题】：Durandal widgets inner function scope and contextDurandal 小部件内部功能范围和上下文
【发布时间】：2016-11-30 18:38:34
【问题描述】：

我有 durandal 小部件和两个同步融合按钮：

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

“是”和“否”两个按钮应该像单选按钮一样工作，当一个打开时，另一个应该关闭。

Q1：我对 viewodel 上下文或范围有疑问。在点击功能内我看不到“自我”，实际上自我总是另一个小部件，因为在一个循环中我渲染了几个小部件，我不知道为什么自我不是我的功能 ctor？

Q2：当我想直接从点击函数接近对象“toggleBtnNo”或“toggleBtnYes”时，它们没有定义。为什么在我的内部“点击”函数中看不到来自全局函数 ctor 的对象？

我只是不知道如何从我的点击功能接近按钮（以一种或其他方式）我如何改变它的状态？

【问题讨论】：

标签： javascript durandal syncfusion

【解决方案1】：

从您提供的代码 sn-p 来看，您似乎正试图通过为模型赋值来更新切换按钮的状态。这样，模型值就被分配了，并且不反映在 ToggleButton 控件中。

相反，要更新ToggleButton控件，需要更新模块中可观察变量(self.toggleButtonNo.toggleState)中的值，并调用ko.applyBindings方法，使模型值将更新 ToggleButton 控件。

请参考下面提供的代码sn-p。

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

【讨论】：

感谢您的回答。你是对的，我在淘汰赛中犯了错误，没有做 applyBindings。但是我的问题是 self/this 不是我的功能的 self 然后其他人仍然在这里。我不确定，但那是 Durandal 的问题。也许我没有正确构造“ctor”函数。在你的例子中我也有一个问题。

【解决方案2】：

这是有史以来最严重的错误。我看着那一百万次并没有注意到。我很惭愧。

我没有把'var'放在self前面。

self = this;

应该是：

var self = this;

这导致 self 进入全局范围，并且每次其他一些小部件覆盖 self 的值。

【讨论】：