Some suggestions for using JavaScript's Backbone. js framework, including javascriptbackbone

Some suggestions for using JavaScript's Backbone. js framework, including javascriptbackbone

Backbone provides models, collections, and views 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 event processing functions and connect to applications through the RESTful JSON interface.
When developing a web application containing a large amount of Javascript, one of the first things you need to do is to stop appending data to the DOM object. Using Complex and variable jQuery delimiters and callback functions to create Javascript applications, including html ui, Javascript logic, and data synchronization, is not complex. But to deal with client applications, a good architecture usually has many benefits.
Backbone presents the data as a model. You can create a model, verify and destroy the model, and even save it to the server. When the model attribute changes due to changes in the UI, the model triggers the "change" event. All views that display model data receive notifications of this event, and the view is re-rendered. You do not need to search the DOM to search for the elements with the specified id to manually update the HTML. -Once the model changes, the view automatically changes.
Backbone. js provides a web development framework, binding key-value and processing m events through Models, and providing a rich set of APIS for enumeration through Collections, use Views to process events and interact with existing applications through the RESTful JSON interface. it is a js framework based on jquery and underscore.

Backbone is inherently stubborn. The most basic point you get from the document is to use the tools provided by backbone. js to do whatever you want.

This is very good, because there are so many different application scenarios, and it is very easy to start writing apps. This approach may avoid making as few mistakes as possible at the beginning.

When something is wrong, we need to discover and find the correct method.

The following tips help you avoid errors during Backbone. js development:

1. Views are Data-independent)

Data belongs to the model (models) rather than the view. Next time you find that you store data in a view (or worse: In the DOM), move it to the model immediately.

If you do not have a model, it is very easy to create one:

this.viewState = new Backbone.Model();

No other operations are required.

You can listen for change events on your data or even synchronize them online with your server.

2. DOM events only change models

When a DOM event is triggered, such as clicking a button, do not let it change the view itself. Change the model.

Changing the DOM without changing the State means that your state is still stored in the DOM. This rule keeps you in the same state.

If you click "load more", do not expand the view. You only need to change the model:

this.viewState.set('readMore', true);

Okay, but when does the view change? Good question. The next rule will answer.

3. DOM changes only when the model changes

Events are amazing. Please use them. The simplest method is to trigger it once after each change.

this.listenTo(this.stateModel, 'change', this.render);

A better way is to trigger changes only when necessary.

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

This view will always be consistent with its model. Regardless of how the model is changed: the view will remain updated as it responds to actions from the command interface or debugging information.

4. The bound items must be unbound.

When a view is removed from the DOM, use the 'delete' method, which must be unbound from all bound events.

If you use 'on' binding, you are responsible for 'off' unbinding. Without unbinding, the memory recycler will not be able to release the memory, resulting in a reduction in your application performance.

This is the origin of 'listento. It tracks the binding and unbinding of views. Before the Backbone moves this from the DOM, it will perform 'stoplistening '.

// OK: this. stateModel. on ('change: readMore ', this. renderReadMore, this); // magic: this. listenTo (this. stateModel, 'change: readMore ', this. renderReadMore );

5. Keep the chained Writing Method

From the render and remove methods, The 'easy' is always returned '. This allows you to write the method chain.

view.render().$el.appendTo(otherElement);

This is a good method. Do not break it.

6. Events are better than callbacks.

It is better to wait for the response event than to callback

The Backbone model (models) triggers 'sync' and 'error' events by default, so you can use these events instead of callback. Consider the two cases.

Model. fetch ({success: handleSuccess, error: handleError}); // This is better: view. listenTo (model, 'sync', handleSuccess); view. listenTo (model, 'error', handleError); model. fetch ();

It doesn't matter when the model is filled (fetched). handleSucess/handleError will be called.

7. Views are scoped.

A view should never operate on its own DOM.

View references its own DOM elements, such as 'El' or jquery object '$ el'

That means you should never directly use jQuery:

$('.text').html('Thank you');

Restrict the selection of DOM elements to your own domain:

This.w.('.text'{.html ('thank you'); // This is equivalent to // this.w.el.find('.text'{.html ('thank you ');

If you want to update a different view, you only need to trigger an event for other views to do so. You can also use the global Pub/Sub system of Backbone.

For example, we prevent Page scrolling:

Var BodyView = Backbone. view. extend ({initialize: function () {this. listenTo (Backbone, 'prevent-scroll ', this. preventScroll);}, preventScroll: function (prevent ){//. prevent-scroll has the following CSS rules: overflow: hidden; this. $ el. toggleClass ('prevent-scroll ', prevent) ;}}); // call it from any other place: Backbone. trigger ('prevent-scroll ', true); // block scrollingBackbone. trigger ('prevent-scroll', false); // allow scrolling

One more thing

As long as you read the source code of backbone, you will learn more. Let's take a look at the source code of backbone. js and then see how these magical tasks are implemented. This library is very small and readable. It will not take more than 10 minutes after reading it.

These tips help us write clean and better readable code.

Articles you may be interested in:

• A Brief Introduction to the Model and View source code of Backbone. js
• Prepare study notes in simple View in the Backbone. js framework
• Describes the MVC Structure Design Concept of the Backbone. js framework of JavaScript.
• In-depth parsing of the event mechanism in JavaScript framework Backbone. js
• Lightweight javascript framework Backbone User Guide
• Some tips for using Backbone. js
• Backbone. js 0.9.2 source code annotation Chinese translation version
• Hello World program instance of Backbone. js
• Details about the set in Backbone. js
• Details about Javascript MVC Framework Backbone. js