Dojo changing scope of data dojo attach point

Question

Can you specify/change the scope of a data-dojo-attach-point to something other than the current widget?

eg. I have a templated widget called parent. In that template I have another widget called child1. Nested in child1, I have some widgets. I want to bind these nested widgets to child1 rather than parent.

Edit:

<div data-dojo-type="someContainer" data-dojo-attach-point="parent">
    <div data-dojo-type="somePane" data-dojo-attach-point="child1">
        <span data-dojo-attach-point="(I want to be bound to somePane)"></span>
    </div>
</div>

I'd like to bind the "span" to somePane without having to go through someContainer.

Are you placing all of them in a single template - the parent? And what do you mean by bind the nested widgets to child1 rather than the parent? — erotavlas, Nov 10 '16 at 22:20
yes, everything is in a single template. By data bind to child1 I mean data-dojo-attach-point to child1 rather than parent which is the default — user7142947, Nov 11 '16 at 15:00
As far as I know, the attach points of a template always belong to it's associated widget, not to the child widgets that you attach to it . So from the child you have to obtain a reference to the parent widget in order access the attach points defined in the parent template. But what are you trying to do? You should provide more details in your post, maybe there is a better design that can accomplish the same goal. — erotavlas, Nov 11 '16 at 16:21
@erotavlas I've added a code snippet to clarify what I was trying to do. Essentially I want to be able to bind the span element to child1. But the span can't be added via dom-construct since other people could be adding them anywhere inside somePane. — user7142947, Nov 15 '16 at 15:44

erotavlas · Answer 1 · 2016-11-16T15:55:09.543

Separate the span into it's own widget and you can add them to the parent like this.

Parent template that contains the content panes

<div style="width: 100%; height: 100%;">
     <div data-dojo-type="dijit/layout/LayoutContainer" style="width: 100%; height: 100%" data-dojo-attach-point="mainNode">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >
            <div >
                <!--some content-->
            </div>
        </div>

        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">
            <div data-dojo-attach-point="centerNode"></div>
        </div>

    </div>

</div>

In postCreate method of your parent widget create new instance of the child and attach it to the parent

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",

    "dojo/text!./templates/Parent.html",

    "somePath/childWidget",

    'dojo/domReady!'
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin,
     _WidgetsInTemplateMixin,

    parentTemplate,

    ChildWidget

) {

    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

        templateString: parentTemplate,


        postCreate: function () {
            this.inherited(arguments);

            var myChild = new ChildWidget();
            myChild.placeAt(this.centerNode);
            myChild.startup();

        }


    });
});

Then because the span is inside it's own widget, you might have a template for it that looks like this

<div>
    <span data-dojo-attach-point="spanNode"></span>
</div>

So now the span attach point is decoupled from the parent. You can directly reference the 'spanNode' from within the widget you created for the span.

Declaratively, in your childWidget that contains the span you can give give it a class name like this

return declare("childWidget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { ...

And in the parent template instead of using an attach point to attach the widget use data-dojo-type like this

    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">
        <div data-dojo-type="childWidget"><!--child widget will get attached here--></div>
    </div>

This works, but I was looking for a declarative solution, since I want to give other people the ability to add the childWidget, in your example, anywhere inside "centerNode" themselves. Could be the first element, could be the last, could be nested 2 levels down, etc... — user7142947, Nov 16 '16 at 15:40
@user7142947 Who are the other people? Users or programmers? What are you trying to accomplish with this particular part of the app? If you provide more details how this is working from the user perspective it could elicit better responses. — erotavlas, Nov 16 '16 at 15:49
They would be programmers. Take your example, the childWidget (a button, when clicked) has the ability to modify ContentPane in some way. I'm trying to give other devs the flexibility to add this childWidget anywhere inside ContentPane without having to worry about handling the events themselves. All they have to do is add some markup and "attach" it to the parent widget (ContentPane) instead of default — user7142947, Nov 16 '16 at 20:49

Dojo changing scope of data dojo attach point

1 Answers1