CODEWITHSUNDEEP
javascriptdojo
Looking Forward
Looking Forward

Reputation: 3585

Use attach point

I'm newbie to dojo. I have created widget and executed it successfully. But now I want to use the concept of attach point here. Below is my code

practice.html

<div>


</div>

practice.js

define([ "dojo/_base/declare"
     , "dojo/text!./practice.html"
     , "dijit/_WidgetBase"
     , "dijit/_TemplatedMixin" 
     , "dijit/_WidgetsInTemplateMixin"

    ], function(declare, _templateString, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin)
    {
    function trace(msg) {

        console.log("practice:", msg, arguments);
    }

    function Controller(w) {
        function myPractice(){
            alert("My Practice");
        }

    this.myPractice = myPractice;       
    }



    var d = 
    declare("Practice.practice", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],  {
        widgetsInTemplate: true,
        templateString: _templateString
        , constructor: function(args) {
            declare.safeMixin(this, args);
        },
        postCreate: function(){
            this.inherited(arguments);
            var controller = new Controller(this);
            //controller.myPractice();
            this.myPractice = controller.myPractice;
    }
    });
    return d;
});

And I'm executing this by using test.html

test.html

<html >
<head>

    <link rel="stylesheet" href="D:/dojofiles/dijit/themes/claro/claro.css">

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="D:/dojofiles/dojo/dojo.js"></script>


    <script>

        showMyForm = function(){

            require(["Practice/practice"], 
            function(practice){

                var myObj = new practice();
                myObj.myPractice();
            });

        }
        showMyForm();       

    </script>


</head>
<body class="claro">

    <div id="myId" enctype="multipart/form-data" action="" method="POST">

</body>
</html

Where and how can I add data-dojo-attach-point and use it to execute my widget?

Upvotes: 1

Views: 12352

Answers (2)

Bvarad
Bvarad

Reputation: 31

Dojo attach points are used to refer html template’s dom nodes directly.

<div id="somenode"><span data-dojo-attach-point="anattachpoint"
     data-dojo-attach-event="click: clicked">Click me</span><br>
     <input data-dojo-attach-point="field"></div>

Javascript to declare a dijit using _AttachMixin.

require([
    "dojo/_base/declare", "dojo/dom", "dijit/_WidgetBase", "dijit/_AttachMixin", "dojo/domReady!"
], function(declare, dom, _WidgetBase, _AttachMixin) {

    var MyDijit = declare([ _WidgetBase, _AttachMixin ], {
        clicked: function(e) { this.field.value = "I was clicked"; }
    })

    var mydijit = new MyDijit({}, dom.byId('somenode'));
    mydijit.startup();
})

Here the dojo-attach-point is "field" and can be referred in your js file using "this.field." In this example we are accessing attribute value of the dom which has dojo-attach-point field using this.field.value

You might think,we could just use ids in the html template, and then dom.byId() in the widget’s js. But if two or more widget instances are created, they’ll all have the same ids! The dom.byId call is no longer precise enough to return the node you want. Further reference : http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html

Upvotes: 2

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

If you start expanding your widget template (practice.html) with additional HTML nodes, and you would like to refer to some DOM node from within your JavaScript widget code (practice.js) then you use attach points, for example:

practice.html

<div>
  <input type="text" data-dojo-attach-point="textfield" />
</div>

practice.js

var d = declare("Practice.practice", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
  widgetsInTemplate: true,
  templateString: _templateString,
  constructor: function(args) {
    declare.safeMixin(this, args);
  },
  someFunction: function() {
    console.log(this.textfield.value); // Now you can use this.textfield thanks to the attach point
  },
  postCreate: function(){
    this.inherited(arguments);
    var controller = new Controller(this);
    //controller.myPractice();
    this.myPractice = controller.myPractice;
  }
});

However, I'm not quite sure if you're familiar with the concept of data-dojo-attach-point, because it doesn't execute your widget to be honest.

Upvotes: 2

Related Questions