EnyoJS Tutorial #10 – HasNode Method

HasNode or I called it Fallen method, it’s not really my favourite method. However, sometimes you might need to interact with the DOM level after the controls are rendered in place. Especially, when you need to integrate with other thirdparty library that requires the node to be there in other to work.

One example will be graph which require tag of canvas to be rendered and has a Node or integrating a div with an id “maps” when using google Map.

The hasNode() ensures that, the controls or kind you referring to has already become a HTML node. The advantage of doing so, we can then reference the node like a html element kinda like jQuery/DOM javascript days.

(Reason why I called it Fallen method is because in Enyo, almost all the controls can be handle binding and functions before they are rendered. Having hasNode and waiting for that particular html node to render just distrupt the elegance of it. Not saying that’s a bad method  just not cool lol).

To use the hasNode method, we simply attach it like a method to any kind name.

1
var myDOM = this.$.controlName.hasNode();

In this tutorial we are going to load an external html like string content. (assuming we are trying to replicate a content from some third party server that we have no control over it). Then, we are going to add some event into the content (button) after it is rendered using the hasNode method.

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
enyo.kind({
name: "App",
kind: "FittableRows", 
classes: "enyo-fit enyo-unselectable contentBg",
components: [
      { kind:"Header" },
      {   
        fit:true,
        classes:"center",
        components:[
          {
            name:"contentPage",
            kind:"ContentHasNodeLoader"            
          }
        ]
      },
      { kind:"Footer", onFooterButtonTapped:"handleLoadExternal" }
  ],
 
  create: function(){
    this.inherited(arguments);
  },
  handleLoadExternal:function(inSender,inEvent) {
    alert("Loading data.json");
    // Just load a json file
    this.loadTextFile('assets/data.json', onSuccess, onError);
    function onSuccess(inSender,inRequest){
      this.$.contentPage.setData(inRequest.data);
    }
    function onError(){
      alert("Error in loading file");
    }
  },
  loadTextFile:function(url,onSuccess,onError){
    // A simple ajax called that have two callbacks as parameter.
    // returns itself back to the caller. 
    var ajaxGet =  new enyo.Ajax({
      url:url,
      method:'GET',
      handleAs:'json'
    }); 
    ajaxGet.go();
    ajaxGet.response(this, onSuccess);
    ajaxGet.error(this, onError);
  }
});

Then, I create a control Kind to process the html text data loaded and then using hasNode method to change it into html node, then attach an onclick event on the button.

ContentHasNodeLoader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
enyo.kind({
    name: "ContentHasNodeLoader",
    kind: "Control",
    components: [
        {
        	tag:"div",
        	name:"contentControl",
        	content:"<p>Tap on the footer button to load content</p>",
        	//This renders any string with html tags allowed. Cool feature.
        	allowHtml:true
        }
    ],
    published:{
        data:null        
    },
    create: function() {
        this.inherited(arguments);
        if(this.data != null){
            this.dataChanged();
        }
    },
    dataChanged: function() {
        this.$.contentControl.setContent(this.data);
        var myDOM = this.$.contentControl.hasNode();
        // We can then use manual DOM javascripting after this.
        console.log(myDOM.getElementsByTagName('button'));
        var myButtonINeed = myDOM.getElementsByTagName('button')[0];
        console.log(myButtonINeed);
        myButtonINeed.onclick = function(event){
            alert("I've just attached an event!");
        };
    }
 
});

Today’s sample code is just an example on how to use hasNode. It represent a scenarios data.json a bunch of html code from some third party server that, you have no control over it’s source. However, you wanted to bind some event to it’s content after it’s rendered into DOM.

Like the usual, today’s tutorial file…

EnyoJS Tutorial10 (648 downloads)

 

 

Comments

comments