Those MVC frameworks of JS: Pull backbone and mvcbackbone

Those MVC frameworks of JS: Pull backbone and mvcbackbone

Those MVC frameworks of JS

 

 

The purpose of writing this article is actually a work requirement. Now I want to share what I learned and hope it will help you.

-- Tomi. zhang

Directory

• L Backbone. js
• L Angular. js
• L Ember. js

Backbone. js

The official explanation of Backbone. js is to provide a model, set, and view structure for complex javascript applications. The model is used to bind key-value data and custom events. The set contains a wide range of APIs with enumeration functions. The view can declare the event handler function and link it to the application through a RESTFUL server using a JSON interface.

BackBone. js is divided into several modules:

{Events} {Model} {Collection} {Router} {View}

Next we will start with the bottom-layer Model!I will use some books to demonstrate the code.

As you can see in the above Code comments, we have clearly created an empty model. Then, we enter point data for this model and we can see the data we just entered in the LOG.

Now we have a basic MODEL. This is a good start. In backbone, it provides us with some methods about the MODEL. You can refer to the specific API.

Address here: http://backbonejs.org/#Model

For example, this Default

We can see that the default data title without the model is a null character, and then completed is false.

Of course, you can add and delete data to the model, listen for changes in the data in the model, and perform a basic verification of the data in the model bla .... Bla .... I will not repeat it here

 

Next, let's take a look at some things in the presentation layer. We call it the VIEW layer.

Although we call him a VIEW, there is no HTML Tag in backbone. He actually focuses on the data provided by the MODEL layer above and performs some logical operations.

The VIEW you see below should be like this

Now you don't have to pay attention to understanding every attribute in this code. What is the method doing?

Here, let me talk about el (he appears in the last sentence of the above Code)

Here is a small example to see if the above Code tagName ClassName id feels like the attribute in html! Actually, in the last line of code, let's look at the LOG in the comment. Do you understand?

I think everyone should understand it, but I also want to say that the created dom element is not inserted into the real DOM.

Here el is used to find the tag that exists in the DOM. Here is the tag with the ID as footer. If you are familiar with jquery, you will like it very much =! Of course, backbone does provide

You can also generate

Other VIEW APIs you can VIEW http://backbonejs.org/#View

 

Let's go back to MODEL. This introduction Collections has a great relationship with MODEL.

Looking at the code above, we have a model named myTodo in the collection.

Of course, you guessed it. We can perform a basic addition and deletion on our collection.

We have the add () and remove () methods.

Of course, there are also a lot of basic methods for us to use and dispatch http://backbonejs.org/#Collection.

 

Let's talk about EVENTS.

Same as jquery

For the event above, you can refer to JQuery's click focus bla... Bla...

Of course, in addition to this, you can also expand it yourself.

Of course event also has a lot of methods like this http://backbonejs.org/#Events

Next I will introduce how the EVENT links to the VIEW mentioned above.

That's simple. What will happen after my single-host checkbox? Execute the clicked callback function

 

Router

Introduction to Routing

The key is to remember this

The following code is in this form.

You see? That's the http://backbonejs.org/#Router.

 

At this point, you may still feel that there is no need to refer to this example http://documentcloud.github.io/backbone/docs/todos.htmland I will give some suggestions in conjunction with the example!

 

The next chapter introduces GOOGLE's Angular

 

 

 

How to dynamically load js template files in backbone as needed

What is backbone
Backbone, not spine, but to help develop framework heavyweight JavaScript applications.

Three main things are provided: 1. Model (model) 2. Set (SET) 3. View (view)

The backbone. js file itself is small and only 5.3KB. As the compression level of the core JS file after a framework, this number is terrible.

In addition, this must also depend on another JS file: underscore. JS (including many tool methods, Set Operations, js templates, etc ).

Backbone. Model indicates all data in the application. You can create a data Model, verify and destroy it, and save it to the server.

When the value "change" event model is automatically triggered, all data view display models will listen for this event and then re-render it.

Backbone. Collection is similar to a Java Collection. We usually use a series of tools, such as adding elements, deleting elements, and getting the length, sorting, and comparison methods. To put it bluntly, it is a saved Collection type model.

Backbone. View can be bound to dom el and client events. When an Html page is rendered by the opinion of the rendering method, a new view is sent to the data passed in the model. For example:

Js Code

Variant view = new EmployeeView ({mode: employee });

This mode is based on relevant methods and opinions.

Feature to create model or view Syntax: extended to create first-class inheritance

When the equivalence of the model is destroyed, the checksum will lead to a series of changes and corresponding events.

For example, you can use backbone. js and jquery to implement an editable employee information table.

Function: 1. Enter employee information. 2. Delete employee information. 3. Double-click the employee information table. 4. Check whether the information is valid to the employee. 5. Stick to employee information.

Design:

Employee information of the Employee class (inherited from Backbone. Model), including ID, name, gender, age, and work field.

Js Code

Window. Employee = Backbone. Model. extend ({

// Model value verification

Verification :? Function (attrs) Two {

Is (in ATTRS variant key ){

If (ATTRS [Key] = ''){

Return key + "cannot be blank ";

} If (Key = 'age' & isNaN (attrs. age )){

Return "age must be a number ";

}

}

}
> });

After the Employee statement, you can add an object such as Employee:

Js Code

Variant Employee = new Employee ();

The Employee class has no declaration ID, name and other business fields. When you need to set employee information, you can call

Js Code

Employee. set ({'id card ': 1, 'name': 'jason '});

Of course, if you need to check the Employee information, the Employee class needs to configure a validate method. The attrs parameter of this method is set to JSON data. Therefore, when the employees in the data change, the validate method is called first.

After defining a good model class, you can start to define a group of classes. You can add, delete, and perform other operations in a series of sets in each model, you can also call the fetch method to obtain the set of initial values from the server.

Js Code

Window. EmployeeList = Backbone. Collection. extend ({

Mode: employee,

// Persists to the local database

LocalStorage: new department store ("employee 」),

});

Window. Employees = new employee list ();

The attribute of localStorage is automatically set... the remaining full text>
 
How to teach js MVC development architecture? It is best to talk about it based on personal development experience

You can look at ExtJS. A popular JS framework. I am also reading this framework. Go to the official website.
In fact, all MVC is the same, and there is no difference.
The so-called JavaScript MVC is to replace what is done with a server with ajax to interact with the server .. This is nice and sometimes fast (the server is only responsible for data transmission)