How to use the mini mvvm framework aveon

Recently, many people have asked me how to use this product. If it is good for those who have used knockout, those who have never been in touch with mvvm may be confused. Most people are attracted by my jquery UI demonstration, and they are deeply aware of its power.

Here we will introduce its usage in detail.

The first step, of course, is to introduce the aveon library, just like introducing the jquery library, of course, from the official website. Now, the address of aveon is this. You only need this file. Of course there is also avalon_min.js next to it.

Step 2: Create a viewmodel, which is the full name of the last two letters of mvvm. It is m repackaging, used to automatically synchronize views. Of course, views can also automatically synchronize VMS. The two-way binding between Vm and V is very attractive, which allows us to write lessCode, Especially the troublesome Dom code. Although jquery provides powerful Dom operations, you can choose operations one by one. Mvvm completely frees you from the shackles of Dom and brings a leap in productivity. The effect is no less than that of the back-end ORM framework, which makes it as comfortable for people to release compatibility between various databases and SQL. Following this analogy, viewmodel is actually the same as the table in the database. The attribute in viewmodel is the field in the table. A table is responsible for data storage of a forum, while a viewmodel is responsible for rendering of a certain area on the page. Therefore, there is a concept of scope. A viewmodel is specifically applied to a certain area on the page. However, the idea of changing CSS here is better understood. a css class name will affect the elements added to it and their children. Avron calls this binding MS-controller (the name from angular). For more information about MS-controller, see here.

Aveon. ready (function () {aveon. define ("area", function (VM) {VM. xxx = "XXX" VM. YYY = "yyy" VM. toggle = true; VM. $ Watch ("toggle", function (newvalue, oldvalue) {// listen to toggle changes, and execute the callback console as soon as it changes. log (newvalue); // here you can do more things you like to do // usually, we should not write too much Dom logic here, because the basic framework of Dom operations has been bound to you. // you only need to set new values of attributes in other VMS here, and the page will be automatically refreshed through the domino effect.}) ;}); aveon. scan () // aveon. scan can be passed in two optional parameters, the first element node as the scanning start point, such as document. body, // 2nd viewmodels, aveon. define has a returned value and is directly included (see the document )})
 

Step 3: bind the view. Among them, the most important thing is MS-controller, which is used to define the scope of viewmodel and then bind it with other children.

 
<P MS-controller = "area" MS-visible = "toggle"> <span >{{ XXX }}</span> <span MS-class-red = "toggle" >{{ XXX }}</span> </P>
 

Binding is an important channel for us to process Dom. If you have learned knockout, You can go here to see how they are used, or see examples and documents on the official website.

What can aveon do for you?

• Data filling, such as some initial values of the form, switching the content of each panel of the card ({XXX }}, {XXX | HTML}, MS-html)
• Class Name processing, such as changing the color of the barrier, changing the color over (MS-class, MS-Hover)
• Event binding (MS-click)
• Attribute processing (MS-checked, MS-href, MS-disabled)
• Data formatting and verification (filter and $ Watch)
• Convert an element into a more powerful UI. If you drag a block, slide block, pop-up layer, color selector, accordion, switch card ......

With aveon, You can seamlessly refresh the page after logging on without any pressure.