Durandal widgets inner function scope and context

Question

I have durandal widget and two syncfusion buttons:

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

Two buttons 'Yes' and 'No', should work like radio buttons, when one is turned on, another should be turned off.

Q1: I have a problem with viewodel context or scope. Inside click function I do not see 'self', actually self is always some another widget because in one loop I render couple widgets, I do not know why self is not my function ctor ?

Q2: Also when I want to approach to object 'toggleBtnNo' or 'toggleBtnYes' directly from click function, they are not defined. Why I cannot see the objects from global function ctor in my inner, 'click' function?

I just do not know how to approach to the button (on one or other way) from my click function how I can change it state ?

score 0 · Answer 1 · answered Jul 29 '16 at 13:06

From the code snippet you have provided, it seems you are trying to update the toggleButton’s state by assigning values to the model. With this, the model values is just assigned and is not reflected in ToggleButton control.

Rather, for the ToggleButton control to be updated, you need to update the value in the observable variable (self.toggleButtonNo.toggleState) in the module and call ko.applyBindings method, so that the model values will be updated the ToggleButton control.

Please refer the code snippet provided below.

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}" />

Script

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

Thank you for you answer. You are right I made mistake in knockout, did not do applyBindings. But my problem that self/this is not self of my function then someone else is still here. I am not sure but that is Durandal question. Maybe I did not construct 'ctor' function properly. I have a problem also in your example with that. — Milos, Jul 30 '16 at 07:51

score 0 · Accepted Answer · answered Aug 01 '16 at 08:21

This was the worst mistake ever. I was looking at that million times and did not notice. I am ashamed.

I did not put 'var' in front of self.

self = this;

should be:

var self = this;

It caused that self goes to the global scope and every time some other widget overwrites value of self.

Durandal widgets inner function scope and context

2 Answers2