Atitit. JS MVC Summary (2)----angular and Knockout o99 best practices

Atitit. JS MVC Summary (2)----angular and Knockout o99 best practices

1. Frame Angular and knockout 1

2.2. Simple List binding: Knockout 1

3. Foreach binding 3

4. Sumup:hesh Angular Simply 3

1. MVC Benefits Angular features include 3

2.2.1 Data binding is the MVVM structure, 3

3.2.10 animation effect , Ng-animate 4

5. Reference 5

1. Frame Angular and knockout

。 With knockout, there is no need to reference UI elements or DOM in a page when writing JavaScript.

The knockout design goal is to use any JavaScript object as a view model. As long as the view model's properties are listener-bound, you can use knockout to bind them to the UI. The UI is automatically refreshed as soon as the property value changes

Author :: old Wow's paw attilax Ayron, email:[email protected]

Reprint please indicate source: Http://blog.csdn.net/attilax

2.2.Simple List binding:Knockout

For a list of bindings, you basically use table. Here we see how to use ko to bind an Array to a table . Because more than one piece of data is best to use a template, we combine jquery 's template plugin to use ko.

First we need to define an array and then define an array of KO.

Ko has its own data definition, which is Availablearray; so we need to use its function to pass in the array we have defined, to generate Availablearray .

The second step is to define a jquery template, define a table, and bind the viewModel data to the template.

Here tbody data-bind is directly binding template, corresponding to the need to give a binding Id , and the data source that needs to be passed into the template.

3. foreachbinding

<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
</tr>
</thead>
<tbody data-bind= "Foreach:items" >
<tr>
<TD data-bind= "Text:product.name" ></td>
<td><select data-bind= "Options:[1,2,3,4,5,6],value:amount" ></select></td>
<TD data-bind= "Text:subtotal" ></td>
</tr>
</tbody>
</table>

4. Sumup:hesh Angular Simply

But foreach bind tsabdd ...

Document JAS 10 angular more

1. MVCAdvantagesAngularfeatures include2.2.1 Data binding is the MVVM structure,

The goal is to let developers completely forget to manipulate the DOM, only to manipulate the data, HTML pages will be automatically updated
For example var shownumber = 1, then you put shownumber = 2 o'clock, the interface is automatically updated, completely do not need to use jquery. html () or. Text () to update the data. In this binding function, most of the current Web site's JS code can be deleted two-thirds.

A large number of built-in instruction systems at the beginning of the ng-are also provided to solve the operational DOM problem by declarative binding in HTML templates. (Declarative instruction is simply the gospel that does not understand JS's front-end development, no longer JS. Show (),. Hide (), write directly to the HTML tag)

3.2.10 Animation effect, ng-animate

angular1.2 version is divided into separate modules ng-animate very method, as long as the HTML write style name animation automatically come out, do not worry about JS code

? MVVM Savior: Model will interact with ViewModel (via $scope object) and will listen for model changes. These can be sent and rendered by view, and the HTML will show your code. View can be dominated by $routeprovider objects, so you can link and organize your view and controller in depth, turning them into navigation URLs. Angualrjs also provides a stateless controller that can be used to initialize and control $scope objects.

Be aware that many frameworks in the open source world are developed by developers for personal interest or passion, such as Cappucino and Knockout. And Angularjs is developed by the Internet giant Google organization. This means that you have more powerful community support. Nobody wants to start using a frame on the first day and find out that the framework has been abandoned the next day!

A year or so ago, when exposed to knockout and Angularjs, feel the data and views automatically bound to the wonderful development experience, immediately discard backbone. At this point, the development has been completely separated, front-end business data layer and view layer separation

All you need to worry about is the change of the data model and the real logical part, and the double binding mechanism can help you to complete the automatic update of the view layer. This is one of the reasons why 17000 of the code can become 5000.

The second reason that ANGULARJS can make the whole code leaner is the so-called component. This function is I have been afraid to use and did not seriously learn, because this feature is too powerful, you can customize the HTML tags, such as multi-tab switch, such as the view layer and the model layer are involved in the final package into a new HTML tag, very powerful, but a lot of traps, used to be more scary. ... Compared to ANGULARJS components, Polymer's component construction method is easier to understand for junior-level developers.

In general, Angular.js relies on a mechanism called dirty check (dirty checking) to determine whether an object has changed. The "Dirty Check" method compares the current value and the previously known value when you scan each object and all of its binding properties. If it has changed, you need to update its bindings. As you can imagine, the more objects in your code, the more expensive the cost will be.

· With the dirty check, you don't need to use accessors. You can use Person.name = "Bill" instead of Person.set (' name ', "Bill"), just like in Ember.js or backbone.js.

· Why do you have so many objects in the DOM? This will eventually become a bottleneck.

Mi?ko Hevery introduced this compromise in StackOverflow. He pointed out that using "dirty check", you cannot have more than 2000 bound objects at a time.

Tom Dale (one of the Ember.js developers) said Ember.js was inspired by cocoa and rails. But the problem is, through ember.js, I don't really feel like writing a Web application, it's like a bunch of thrown concepts. And in Angular.js, I feel like I'm writing a Web application that really supports all of the Web concepts and extends HTML in a very natural way.

。 HTML is great because it's declarative

· <ul>

· <li ng-repeat= "element in array" >element</li>

· </ul>

This syntax looks like the new MDV standard . This looks more concise than ember.js. In addition, the angular.js is optimized very quickly, and the development team achieves the following actions:

· Dirty Check

· Check the current View only

· Check only when a change occurs

· Work with the Chrome team to take advantage of JIT

5. Reference

(foreach binding ) (Knockoutjs QuickStart ( Classic ) _javascript tutorial _java College _ Nozomi Web . htm

Knockoutjs Learning Series ----( i )-Nic Pei- Blog Park . htm

Paip. Increase Efficiency -- data is bound to Table Principles and Processes Angular js jquery Implement -Attilax 's Column -  Blog Channel -CSDN.NET.htm

Atitit. JS MVC Summary (2)----angular and Knockout o99 best practices