Go MVVM Architecture ~MVC,MVP,MVVM

The MVP is evolved from the classic pattern MVC, where the basic ideas are interlinked: Controller/presenter is responsible for the processing of logic, model provides data, and view is responsible for the display. As a new model, there is a significant difference between MVP and MVC: In MVP, view does not use model directly, communication between them is through presenter (Controller in MVC), all interactions occur within presenter, In MVC, view reads data from the direct model rather than through the Controller.

In MVC , view is directly accessible to the model! As a result, the view contains the model information and inevitably includes some business logic. In the MVC model, more attention is paid to the constant of the model, while there are several different displays of the model, and the view. So, in the MVC model, models do not depend on view, but view is dependent on model. Not only that, because some business logic is implemented in view, it is difficult to change the view, at least those business logic is not reusable.

MVVM is conceptually a pattern that truly separates pages from data logic, and in the way it is developed, it is a pattern (asp,asp.net,php,jsp) that really separates the foreground code Developer (js+html) from the backend code developer.

The difference between MVP and traditional MVC, but the MVC we're advocating now is going to be MVP.

In the MVP, presenter completely separates the model from the view, and the main program logic is implemented in presenter. Furthermore, presenter is not directly related to the specific view, but interacts through a well-defined interface, allowing the presenter to be kept constant when the view is changed, that is, reuse!

Not only that, we can also write Test view, simulate the user's various operations, so as to achieve the test of presenter-without the need to use automated testing tools. We can even test the logic of presenter by writing a mock Object (that is, an interface that implements the model and view, but no concrete content) when the model and view are not finished.

In the MVP, the logic of the application is mainly implemented in presenter, where the view is a very thin layer. As a result, a design pattern for presenter first was proposed, which was to design and develop presenter based on user story. In this process, the view is simple enough to display the information clearly. At the back, you can change the view as you want, without any effect on the presenter. If the UI to be implemented is complex, and the associated display logic is related to model, you can place a adapter between the view and the presenter. This adapter to access the model and view to avoid the association between the two. At the same time, because the adapter realizes the interface of the view, it can guarantee the same interface with the presenter. This guarantees the simplicity of the interface between the view and the presenter, without losing the flexibility of the UI. In MVP mode, view should only have a simple Set/get method, the user input and Settings interface display content, in addition to this should not have more content, never allow direct access to model--this is a big difference with MVC.

at present, we advocate MVC already with MVP without much difference , view is still a very thin layer, not with the model logic processing, only for simple page display logic processing.

MVVM is shorthand for Model-view-viewmodel.

Microsoft's WPF brings new technical experiences, such as Sliverlight, audio, video, 3D, animation ..., which leads to a more detailed and customizable software UI layer. At the same time, at the technical level, WPF (formerly WinForm) has also brought in such things as binding, Dependency property, Routed Events, Command, DataTemplate, New features such as ControlTemplate. The origin of the MVVM (Model-view-viewmodel) framework is a new architectural framework that evolves when the MVP (Model-view-presenter) pattern is applied in conjunction with WPF. It is based on the original MVP framework and combines the new features of WPF to address the increasingly complex needs of customers.

The meaning of introducing MVVM in MVC

Front-end engineers have a real separation from program developers, and of course, in order to reduce the amount of repetitive code, it is necessary for front-end personnel to understand a database structure.

JS plugin for MVVM on the front end, Knockoutjs

Knockoutjs can flexibly implement the data binding work, for the foreground developer, do not need to care about the background data in how to produce, they only need to care about the property signature of the data, for the program developers, they are concerned about the data generated interface, including simple curd interface, Program developers can write these logic in a separate JS file, the HTML page to specify the reference, real data to complete the binding work.

Using Knockoutjs to implement the MVVM pattern in MVC

HTML code:

<Table>        <thead>            <TR>                <th>Number</th>                <th>Name</th>                <th>Phone</th>                <th>Operation</th>            </TR>        </thead>        <tbodyData-bind= "Template:{name: ' List ', foreach:lines}">        </tbody>        <tfoot>            <TR>                <TDcolspan= "4">                    <ButtonData-bind= ' click:AddLine '>Add</Button></TD>            </TR>        </tfoot>    </Table>    <Scripttype= "text/html"ID= "List">        <TR>            <TD><span Data-Bind="Text:id"></span></TD>            <TD>                <span Data-Bind="Text:name"></span>            </td>            <TD>                <span Data-Bind="Text:phoneno"></span>            </td>            <TD>                <a href='#'Data-Bind='click: $parent. Removeline'>Remove</a>            </td>        </tr>    </Script>

The controller layer C # code gets the data:

Public IEnumerable<contact>  Get ()        {            contact[] contacts = new contact[]            {                new contact{id=1, name= "Zhang San", phoneno= "123", emailaddress= "[email protected]"},                new contact{id=2, name= "John Doe", phoneno= "456", emailaddress= "[email protected]"},                new contact{id=3, name= "Harry", phoneno= "789", emailaddress= "[Email protected]"},            };            return contacts;        }

Knockoutjs code is used to bind data and implement page interactions

<Scripttype= "Text/javascript">        varCartline= function () {            var Self=  This; Self. Id=ko.observable (); Self. Name=ko.observable (); Self. Phoneno=ko.observable (135); Self. EmailAddress=ko.observable ("@");        }; $.getjson ("http://localhost:2166/api/values/", function(data) {varCart= function () {                //Stores An array of lines, and from these, can work out the GrandTotal                var Self=  This; //self.lines = Ko.observablearray ([New Cartline ()]);Self.lines=Ko.observablearray (data); //OperationsSelf.addline= function() {Self.lines.push (Newcartline ())}; Self.removeline= function(line) {Self.lines.remove (line)}; } ko.applybindings (NewCart ()); });

OK, here, an example of MVVM style has been explained, next we will gradually learn Knockoutjs.

Citation link: MVVM architecture ~mvc,mvp,mvvm

Go MVVM Architecture ~MVC,MVP,MVVM