Front-end MVVM framework: knockout.js (i)

Objective

In our usual development of WEB applications, if the project is not particularly large, usually with jQuery and some of the front-end UI framework is applied on the project. If the page logic is a little more complicated, the one that writes the front-end JavaScript code is bound to flood the application of the previous JQuery selector. I don't want to say it's good or bad. Just to ask, is there a more convenient way? Those of you who have experienced WPF development will certainly know the development model of MVVM (model View ViewModel). It can easily isolate the View from the corresponding back-end code. Make the project easy to maintain. So how did this happen? is actually the event-based notification mechanism within WPF. In a XAML file, just write the property that you want to bind, and then assign a DataContext to the view to bind the backend data to the view. This has to say that an interface inotifypropertychanged, then the specific words will not chat, after all, this article intends to talk about the front-end MVVM (Model View ViewModel) Framework--knockoutjs.

The front-end MVVM (Model View ViewModel) Framework I know has three:

• Written by Microsoft Developer knockout.js--
• angularjs--Google front-end MVVM framework
• avalon--Domestic

Small trial Sledgehammer

After using the front-end MVVM framework, I personally feel that the biggest benefit is that there is no need to use a large number of selectors to satisfy my front-end business logic. It internally implements the two-way binding of the data, that is, when we change the value of the variable, the value of the corresponding HTML element is automatically changed, eliminating the use of $ (' #xxx '). val (variable); This syntax goes to assigning values, just focus on how the front-end business handles it. Even if the front-end business is simple, using MVVM will make your business easier than it is simple, really hanging on! Let's look at a simple example:

<formID= "Form1">    <Table>        <TR>            <TDData-bind= "Text:firstname"></TD>            <TDData-bind= "Text:lastname"></TD>            <TD><inputtype= "text"Data-bind= "Value:firstname"  /></TD>        </TR>    </Table></form><Scripttype= "Text/javascript">    varViewModel= function() {        var Self=  This; Self. FirstName=ko.observable ("Jroger"); Self. LastName=ko.observable ("Song"); //Other business logic    }; Ko.applybindings (NewViewModel ());</Script>

Did you omit the trouble of using the selector again? Of course Knockout.js is compatible with JQuery. What kind of spark will there be in the combination of two powerful weapons? This depends on how it's used.-_-| |

Write this a bit today, there's nothing valuable in it. Follow-up will write an article using Knockout.js to open a complete module, in order to knockout.js more usage to show.