CODEWITHSUNDEEP
dojo
saravanakumar
saravanakumar

Reputation: 1777

Dojo1.9: Custom widget inherited from another custom widget template string update not reflected

I have a custom widget which extends _WidgetBase, _TemplatedMixin with template 

<div dojoAttachPoint="widget">
 <div dojoAttachPoint="title">${name}</div>
 <div dojoAttachPoint="dnmschart"></div>
</div>

and another widget which extends above widget

require([
'dojo/_base/declare',
'my/widget/view/AbstractWidget'
], function (declare, AbstractWidget) {
 return declare("my.widget.view.AbstractChart", [AbstractWidget], {
constructor:function(){

},
buildRendering: function(){
    this.inherited(arguments);
    var gridDiv = document.createElement("div");
    gridDiv.setAttribute("dojoAttachPoint", "gridPlaceHolder");
},
postCreate:function(){
    this.inherited(arguments);
   //Here I could not get newly created node gridPlaceHolder
    console.log(" POST CREATION");
}
});
});

When I print in console (Break point in post create method)

this.domNode

It shows newly created node at last in document(last node in above template)

<div dojoattachpoint="gridPlaceHolder"></div>

But I could not access gridPlaceHolder attach point in post create method.

Is there anything else need to configure? Please help me on this:)

Upvotes: 0

Views: 560

Answers (2)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

As stafamus said, the primary problem here is that you're attempting to assign data-dojo-attach-point or dojoAttachPoint to a node after the template has already been parsed (which happens during the this.inherited call in your buildRendering.

Going beyond that, given the code in the original post, it also appears you're never actually adding the markup you create in buildRendering to your widget's DOM at all - you've only created a div that is not attached to any existing DOM tree. I'm a bit confused on this point though, since you claim that you are seeing the markup for the node you added, which shouldn't be possible with the code above, or the code in stafamus' answer.

Rather than attempting to dump extra markup into your template, you might as well do the programmatic equivalent to what an attach point would be doing in this case anyway: create your DOM node, attach it to your widget's DOM, and assign it to this.gridPlaceHolder. e.g.:

buildRendering: function () {
    this.inherited(arguments);
    this.gridPlaceHolder = document.createElement('div');
    this.domNode.appendChild(this.gridPlaceholder);
}

Upvotes: 0

stafamus
stafamus

Reputation: 509

data-dojo-attach-point (which you should use for 1.6+ instead of dojoAttachPoint) allows you to have handles for dom nodes in your template.. It is parsed by _TemplatedMixin's buildRendering(), so it will be available in your buildRendering method just after this.inherited line.

You can not set data-dojo-attach-point using setAttribute, it can only be defined in templates to be parsed by TemplatedMixin. If you need your child widget to add some markup in addition to what there is in its parent's template, you can define a variable in your parent's markup, and overwrite it in your child widget:

Your AbstractWidget template:

<div data-dojo-attach-point="widget">
    <div data-dojo-attach-point="title">${name}</div>
    <div data-dojo-attach-point="dnmschart"></div>
    ${childMarkup}
</div>

And then you need to add your additional markup in child's buildRendering, before this.inherited:

require([
    'dojo/_base/declare',
    'my/widget/view/AbstractWidget'
], function (declare, AbstractWidget) {
return declare("my.widget.view.AbstractChart", [AbstractWidget], {

    buildRendering: function(){
        this.childMarkup = '<div data-dojo-attach-point="gridPlaceHolder"></div>';
        this.inherited(arguments);
    }
});

Upvotes: 1

Related Questions