1.knockout.js website Study (introduction)

Objective

The recent period of time on the Internet often see about knockout.js articles, so I went to the official website to see the next, but in English, I can not make a decisive, borrowed Google translated a bit. And then just found in the establishment of the ASP. NET mvc4.0 application, after the completion of the project I saw in the scripts of the two JS class library, Google Translate to see the Xia Guan Network, KO's implementation principle is MVVM, more advanced than MVC.

Introduction to MVVM Mode

MVVM is shorthand for Model-view-viewmodel.

The combination of

WPF data binding and presentation model is a good practice, allowing developers to separate view and logic, but this data binding technique is very simple and practical, and is unique to WPF, so we call it Model-view-viewmodel (MVVM). This model is similar to the classic MVP (Model-view-presenter) model, except that you need a model that is tailored to the View, which is viewmodel. ViewModel contains all UI-specific interfaces and properties, and is bound by a ViewModel view, and can be loosely coupled, so you need to write the code in the ViewModel direct update view. The data-binding system also supports the validation of input that provides a standardized way of transmitting validation errors to views.
in the View section, which is usually an ASPX page. In previous design patterns, because there was no clear delineation of responsibilities, the UI layer often became the universal proxy for the logical layer, which actually belonged to the other layers of the application. The M in the MVP and the M in MVC are a model that encapsulates the computational relationships of core data, logic, and functions, while V is a view (form), p is a form that encapsulates all the actions in the forms, responds to the user's input and output, events, and so on, as in MVC, except that MVC is a system-level architecture. And MVP is used on a particular page, that is, MVP flexibility is far greater than MVC, the implementation is very simple.

We then parse this interface layer from iview, which can help us decouple the various UI from the logical layer, and we can go from the UI layer to the automated test (unit/automatic test) and provide the portal, which can previously be form/by Winform/web The UI written by MFC is communicated with the iview layer through event Windows messages. The best way for WPF to communicate with the iview layer is to use binding, of course, to use events, and presenter layer to implement iview, the polymorphic mechanism ensures that the runtime UI layer displays the appropriate data. For example, in a program, you might see that the source of the binding is a variable of type interface, in fact, the object referenced by this interface variable is the real data source.
MVC pattern Everyone is already very familiar with, here I do not repeat, these patterns are in turn evolved to form MVC->MVP->MVVM. There is a good saying: When the object is in the relay, where the interface is the most likely to be torn down. Therefore, iview as a layer of the public View Interface constraint (contract), the view can convey the decoupling of a layer of meaning.

The advantages of MVVM

MVVM has been widely used in Microsoft wpf/silverlight/wp7, like the MVC model, with the main purpose of separating views and models, with several advantages

1. Low coupling. Views can be independent of model changes and modifications, a viewmodel can be bound to different "view", when the view changes the model can be unchanged, when the model changes when the view can be unchanged.
2. reusability. You can put some view logic in a viewmodel and let many views reuse this view logic.
3. Independent development. Developers can focus on business logic and Data Development (ViewModel), designers can focus on page design, and using Expression Blend makes it easy to design interfaces and generate XAML code.
4. can be tested. The interface is always more difficult to test, and now the test can be written for ViewModel.

Simply put, in MVVM, the data involved in UI manipulation is packaged as ViewModel, and then the UI input/display elements are labeled with an attribute value corresponding to ViewModel. When the code changes the ViewModel property value, its corresponding input/display field elements are automatically updated, and when the UI field is filled with different content, the ViewModel's data properties are immediately modified to the new value. The concept of this two-way binding (two-way binding) is to intercept the onchange event of the INPUT element if the ViewModel property modification event is used traditionally to reflect the new value to a display/INPUT element. By using the program to reflect the latest input results to the ViewMode attribute, trivial practical details are quite numerous. The goal of either the SILVERLIGHT/WPF or JAVASCRIPT,MVVM library is to save the previous self-development effort by simply stating its corresponding ViewModel attribute on the display/INPUT element. All of this is then handed to the Knockout.js library for automatic processing, allowing programmers to gracefully implement MVVM.

Advantages of Knockoutjs

1. Declarative binding (declarative Bindings): It is easy to associate model data to DOM elements with a simple, readable syntax.
2.UI Interface Auto Refresh (Automatic UI Refresh): Your UI interface will update automatically when your model state changes.
3. Dependency tracking (Dependency Tracking): Implicitly establishes relationships between your model data for the transformation and syndication of data.
4. Templates (Templating): Quickly write complex, nested UIS for your model data.
5. Free, open source pure JavaScript-compatible with jquery or other JavaScript frameworks, reduced version only 40kb,http compressed after only 14KB cross browser! Support ie6+, FF2, Chrome, Opera, Safari

The official website offers a friendly and interactive online introductory tutorial that lets you go to http://learn.knockoutjs.com/exercises and view detailed API documentation.

Getting Started with Knockout.js

If you build a Web application like ASP. NET MVC 4.0, you can use knockout.js without any action, and if you build other projects you might need to reference that class library. Through the NuGet package

Click Install to locate the Ko related class library file in the project's scripts or other appropriate folder.

Simple call

@{Viewbag.title ="First";} "Text"Id="Txtvalue"Data-bind="Value:myvalue"/></td> </tr> <tr> <td> response text:</td> <td><span id="Spnvalue"Data-bind="text:myvalue" ></span></td> </tr></table><script type="text/ JavaScript"src="~/scripts/knockout-2.3.0.debug.js"></script> <script type="  Text/javascript"> var myviewmodel = {myValue:ko.observable ("aehyok")}; Ko.applybindings (Myviewmodel); </script>                 

Then I'm building an ASP. NET mvc4.0 application, and then, after running, entering text data, moving the mouse away, you can see that the text in span changes as well.

1. We first need to refer to the class library src= "~/scripts/knockout-2.3.0.debug.js"

2. Define a Myviewmodel Component object and include a MyValue property.

3. Bind the MyValue property to <input> 's value by data-bind= "Value:myvalue".

4. Dynamically reflect the attribute value to <span> by data-bind= "Text:myvalue".

Because this example does not refer to jquery, no $.ready () is available, so put <script> at the end of the page to make sure that ko.applybindings () is not executed until the page element is loaded.

Try to change the value of <input>, you can find that <span> will immediately respond to the modified results, you can see that has been automatically detected onchange time, and indeed very tough!

1.knockout.js website Study (introduction)