Can't use this.connect when defining a dojo widjit

Vote:
 

I'm trying to create a custom editor for business hours. I'm having problems connecting programmatically created buttons to event-handlers using this.connect. The form edit mode of the editor stops loading when I add the this.connect line (line 132). Anyone had this problem? Why doesn't Dojo/Dijit show any errors?

define([
     "dojo/_base/array",
     "dojo/_base/connect",
     "dojo/_base/declare",
     "dojo/_base/lang",

     "dojo/html",

     "dijit/_Widget",
     "dijit/_TemplatedMixin",
     "dijit/_WidgetsInTemplateMixin", // The widget will in itself contain additional widgets

     "dijit/form/Button",

     "epi/epi",

     "dojo/text!hfn/businesshours/WidgetTemplate.html"
], function (
     array,
     connect,
     declare,
     lang,

     html,

     _Widget,
     _TemplatedMixin,
     _WidgetsInTemplateMixin,

     Button,

     epi,

     template) {

    return declare("hfn.businesshours.Editor", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
        // Load HTML template from the same location as the widget
        templateString: template,

        postCreate: function() {
            // summary:  
            //    Set the value to the textbox after the DOM fragment is created.  
            // tags:  
            //    protected  

            this.set('value', this.value);
        },

        startup: function() {
            this._generatePreview(this.value);
        },

        focus: function() {
            // summary:  
            //    Put focus on this widget.  
            // tags:  
            //    public  

            dijit.focus(this.day);
        },

        // Checks if the current property value is valid (invoked by EPiServer)
        isValid: function() {
            // summary:
            //    Check if widget's value is valid.
            // tags:
            //    protected, override

            return true; // TODO
        },

        // Event used to notify EPiServer that the property value has changed
        onChange: function(value) {
            this._generatePreview(value);
        },

        onAddClick: function(event) {
            // summary:   
            //    Handles when a user presses the `Add` button
            // tags:   
            //    private

            var newValue = this.day.value + ':' + this.hours.value;


            this._addValue(newValue);
            this.onChange(this.value);
            dijit.focus(this.day);
        },

        removeHours: function (index) {
            console.log(index);
        },

        _setValueAttr: function (value) {
            // summary:   
            //    Sets the value of the widget to "value" and updates the value displayed in the textbox.   
            // tags:   
            //    private   

            console.log(value);
            console.log(this.previewForm);

            this._set('value', value);
        },

        _addValue: function (value) {
            var oldData = this.value;
            if (oldData === null) {
                this._setValueAttr(value);
            } else {
                this._setValueAttr(oldData + ';' + value);
            }
        },

        _generatePreview: function (value) {
            var hours = value.split(';');
            for (var i = 0; i < hours.length; i++) {
                var b = new Button({
                    iconClass: 'epi-clearButton',
                    label: hours[i],
                }, hours[i]);
                b.startup();
                b.placeAt(this.previewForm);

                this.button = b;
            }
            console.log('so long');

            // If I uncomment this line the form edit mode of the page will no longer load.
//            this.connect(this.button, 'onclick', removeHours);
        }
    });
});
#123228
Jun 29, 2015 14:23
Vote:
 

Hi Kantis,

I think that inside _generatePreview method you have different context for this object. It's a current function context instead of widget context. The problem is related with executing _generatePreview function inside onChange event. In that place the context change. 

You could modify _generatePreview method and use lang.hitch to keep the widget context. You already referenced the "dojo/_base/lang" so there is no dependencies to add. 

The modified code should looks like:

 
// --- your code

// Event used to notify EPiServer that the property value has changed
        onChange: function(value) {
              lang.hitch(this,  this._generatePreview);
        },


// --- your code

 

#123244
Jun 29, 2015 22:35
Vote:
 

Hi Grzegorz,

Thanks for your reply. Sadly this is  the same in both contexts and using lang.hitch didn't make a difference. Do you happen to know why I'm not getting any JS-errors when dojo breaks? Might help in tracking down the problem :)

#123250
Jun 30, 2015 9:38
Vote:
 

Solved it. It was crashing due to removeHours being undefined. Also, connect didn't seem to work. I used dojo/on instead which works fine :)

#123255
Jun 30, 2015 11:02
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.