|Web Components With X-Tag|
|Written by Ian Elliot|
|Tuesday, 15 October 2013|
Page 3 of 3
If you want to give your component a property called myval then you can do the job with the accessors object:
That is, for each property you want to create you simply provide two functions, a get and a set.
There is one small gotcha to keep in mind. You can't use this.myval in the definition of myval otherwise the result is a recursive call to get or set.
One way to deal with local variables for each instance of your component is to set up an object to store them. For example:
With this definition you can now write things like:
If you run this you will see zero and 30 printed on the console log.
Of course, components can also have attributes and you can create a property that corresponds to an attribute using the attribute property.
defines a property called myval as before corresponding to an attribute called myval which can be set using:
or in code
Of course you can still set it as a property as in:
This does raise the question of how to initialize a property if it is also an attribute. If the attribute has been set in the tag you don't want to set it to a default value. However, as the property is automatically set from the attribute in the tag by using the appropriate set function, it turns out to be easy. All you have to do is put something like:
in the created function.
As well as properties you can also define methods in the methods object. For example, to create a clearAll method you would use
and then you could call the method in the usual way:
You can, of course, create as many methods in the methods object as you need.
Finally, you can define events within the events object. For example, to handle the component's click event:
Now if you click on the component the message is displayed on the log.
That's about it for an introduction to X-Tag but there is more. There's a set of useful helper functions, for example, which can make building your own components much easier. You also need to look up pseudos, templates, mixins and the prototype property. At the moment X-Tag is still developing and these are best left for a future update to this article.
Have a look at some of the simpler components supplied with X-Tag or download the very simple example built up in this article from the CodeBin (note you have to register first).
To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin, or sign up for our weekly newsletter.
or email your comment to: firstname.lastname@example.org
|Last Updated ( Tuesday, 15 October 2013 )|