London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

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.