Ale.js

Data

Start

In the Component Basics article, I believe you have learned some basic ways to add data. If you haven’t studied this tutorial yet, please come back after learning!

In the component-based tutorial, you only learned how to add data. So why add dynamic data?


It’s actually very simple, because the template is static and the data is dynamic. If we change somewhere, it’s actually much simpler than changing the template!

For example, we first define a component named com1 and then render it:

1
2
3
4
5
6
7
8
9
10
11
12
Ale("com1", {
template: function(){
return "Hello " + this.data.name;
},
data: {
name: "World"
}
})

Ale.render("com1", {
el: "#app"
})

The rendering results are as follows:

So since we know that we can modify the data dynamically, how can we modify it?


Quite simply, we just need to store the result returned by the Ale.render function (which is actually the Ale component object) into a variable:

1
2
3
var app = Ale.render("com1", {
el: "#app"
})

Then use this variable to manipulate data:

1
app.data.name = "Ale.js"; /* Reassign */

Now let’s type app.data.name = "Ale.js" in the console, and you’ll see the following instance dynamic update:

At the same time, our data will be automatically bound to all elements within the component, accessible using this.data, for example, we will be a component that records clicks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Defining components */
Ale("counter", {
template: function(){
/* Let this.data.count increase itself */
return "<button onclick='this.data.count++'>You clicked me " + this.data.count + " times.";
},
data: {
count: 0
}
})

/* Rendering component */
Ale.render("counter", {
el: "#app"
})

In fact, the data can be applied not only to the template, but also to the properties of any supported function. Of course, the properties of these bound data will be updated whenever you update the data.

What are the specific properties that can be applied to the data, please continue to view the tutorial!

Advanced

About Vue

If you know Vue, you will find that using Vue to set the data requires adding a function and then using return to return the required data:

1
2
3
4
5
data: function () {
return {
/* Add data here */
}
}

Vue does this because each time the JavaScript engine copies an object, it is copied along with the object’s memory address, which causes another object to be updated when an object is updated. At this time, if we use a function to return an object each time, it is equivalent to creating a new object with a different memory address each time, there will be no such problem.


However, doing so will result in an increase in the amount of code you need to write, while Ale uses a deep copy to scan from the root of the object and create a brand new object layer by layer. Doing so will cause a certain performance penalty (ignoring small amounts of data), but it also reduces the amount of code you need to write.


If you need multiple components to share a set of data, try having one component render multiple elements at the same time in one render, or use composite components.

More

You can also set the component’s data using the format app.data:

1
2
3
4
app.data = {
count: 1,
key: "val"
}

Improve performance

In version 1.0.0 (and later), we let single-component data support function types, which can significantly increase performance when there is a huge amount of data (because deep copy is not required), but if data is dynamically set during rendering, then function optimization Will have no effect:

1
2
3
4
5
6
data: function(){
/* Need to use return to return */
return {
count: 0
}
}

Found some errors? Edit on Github!