Ale.js

Component object

Start

Whenever you render a component, Ale will return a Ale component object, you can define a variable to receive it:

1
2
3
4
/* Define a variable to receive an Ale component object */
var app = Ale.render("test", {
/* ...... */
})

Let’s click on the example above and you will see it output its own Ale component object in the console.

Advanced

But this creates a problem. If our component needs dynamic rendering, how do we get its Ale component object?

Very simple, you only need to use the this keyword in the properties of the support function to get:

1
2
3
4
5
6
7
8
/* Define a component */
Ale("test", {
life: {
mounting: function(){
console.log(this) /* Here this refers to the Ale component object after rendering is completed. */
}
}
})

In the above example, you may not understand the role of the life attribute, but we are just showing you how to use it. For details, please continue to view the tutorial!

Currently all the properties of the supported function:

  • template (1.0.0 before the template property is automatically bound to this.data, and in version 1.0.0 and later, using the this code in the template property refers to the ale component after rendering. The object, which is this [but you can only access the data, staticData, methods properties of the ale component object]):
  • life (the life attribute itself does not support functions, but its internal properties all support functions)
  • debug (The debug property itself does not support functions, but its internal properties all support functions. However, note that the internal function of debug will not bind this)
  • proxy (The proxy property itself does not support functions, but its internal properties all support functions.)

Found some errors? Edit on Github!