The graphic description of the wex5 tutorial shows the cluster application and binding technology of the object, and the wex5 Cluster

The graphic description of the wex5 tutorial shows the cluster application and binding technology of the object, and the wex5 Cluster

I. Preface:

In the official wex5 tutorial, the beginning is an example of input and output real-time output, showing the concept of an object that can be observed. In the future, I will use a lot of observability objects in my project development.

So the question is:

1. What is an observed object?

2. What can an observed object do?

3. What work can an observed object replace? What are the advantages?

4. How can we observe the object binding mechanism and practical application skills?

To help you understand the importance of binding technology in web development, and to learn more about its further application, I will describe it with the video player I designed with wex5, there is no observed object, and it is almost impossible to talk about the production of the word screen machine. With the binding mechanism of the observed object, no code needs to be written.

Look at the instance.

2. design requirements:

The design requirements are as follows:

1. On the background subtitle designer interface, perform operations on the right side and perform real-time text response operations on the left-side video screen.

2. The response content includes: content, Font, color, back, transparency, font spacing, line spacing, and font size.

3. After the design, save the text-related attributes to the database. When the client plays a video, it receives the ad subtitle content designed in the background in real time.

Three Implementation ideas:

Aside from today's skills, let's first think about how to meet the above design requirements?

1. js method

I don't want to think about it. With so many parameters, I have to assign values to js, find elements, control trigger events, and add or remove listener events to listen to objects. My God, several parameters are fine. So many parameters ?? You have to control the css style. The experts may be able to implement it. It is estimated that the css style can be completed in a month, and the test can also be successful. You may not want to change it back if an error occurs. The amount of code is too large.

2 baasdata binding

This method is good. Unfortunately, we use non-wex5 components, color, and many others, such as video and audio. In short, half of html5 components are not integrated into wex5 component libraries, you are bound to baasdata, which cannot meet complex page requirements.

What should we do?

Isn't the subtitle designer of my web version finished?

The answer is certainly yes, that is, the observability object cluster application and binding technology mentioned at the beginning.

4. component creation and code implementation

1. create non-wex5 components and attributes

Manually add <input type = "color" id = "textID" bind-value = "textColor"/> in the proper position of the source code to create the input type, color

Click "add custom attribute" to create the bind-value attribute. Magic: add the bind-value attribute and the color value to bind it to other objects. Today, we bind the color value of color to the observed object.

Only color is used here. Other non-wex5 elements or components are created in the same way.

2 Text attribute database fields

3 front-end baasdata

4. Create observed objects corresponding to all attributes

5. Bind the page component value to the observed object.

Similarly, the bind-value attribute values of all components are written with the corresponding observability Object Name and component value. Regardless of the change, the value of the observed object is bound to it. For example, if the color picker is selected as black after I click it, the color value is synchronized to the textColor value.

Using this method, the values of all components are bound to the observed object. Next, the value of the observed object is taken out and then bound to the style in text.

6. Retrieve the value of the observed object and bind it to the text style using the bind-style method of text.

Just one sentence

At this point, the subtitles on the video are synchronized on the right side of the operator.

So simple ?? That's simple ???

Yes, that's simple.

Why have I talked so much nonsense? This is to let everyone understand the importance and advantages of object and binding technology in web development.

It is precisely because the design of this screen machine cannot be implemented, and it is too complicated to return to the origin to rethink.

Everyone should learn the technology and the way to think about the problem.

A message is displayed:

Previously, I used JavaScript to drag elements. What if I used coordinate binding ???? It's really simple and simple.

 

Summary:

1 binding technology is the core idea of implementing excellent web design

2. The simpler the idea, the more complicated the Code; the deeper the idea, the simpler the code. In this example, a line of code is not written, but an observed object is created.

3. It cannot be limited to wex5. Let's get started with thinking and think about what wex5 does not have. How to import it and use wex5's framework basics and binding technology skillfully.