![]() That way, if a customer asks if we have a board from a particular manufacturer, or an exact model of board, or both, we can do a quick look up. Imagine we’re running a surf shop, and we want to build a database of surfboards that we carry. With that in mind, let’s draft up a little example that we’ll use going forward. Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. Here’s a little excerpt from the Backbone docs on models: Let’s jump into models, and gain a better understanding of them. For now though, it’s just important to understand that this logic does indeed exist, but resides inside the view. In the second part of this series, I’ll get into event handling inside the view, communicating with the model, and then sending updates back to the view. In Backbone, however, they house one other major function as I mentioned before. If you thought that it was to render data for the end user, then you’re mostly correct. What about views? Given the name “view”, it’s pretty easy to draw assumptions about their responsibility. ![]() Models can thus communicate with that database, and perform certain actions, such as CRUD operations. ![]() In a production grade application, that data is likely stored in a database somewhere. With this in mind, it’s easier to understand how a particular model is a representation of a certain set of data. Well, it’s not that complicated! I try to think of models as a “model of data”, the same way an architect might have a model of a house, or an engineer might have a model of an aerofoil. We’ve jumped the gun a bit here though, as we haven’t looked at what models and views are. To understand a bit more about the anatomy of a JavaScript MV* framework, check out this post. In MV* frameworks like Backbone, though, the controller logic is handled inside the view itself. Historically, a controller would respond to some kind of user input, and communicate that input to the model, or back to the view. Traditional MVC frameworks contain that extra C, which stands for controller. For instance, to log a message whenever the numberOfPages changes, you could do: huckleberryFinn.on('change:numberOfPages', () => console.log('Page change!')) įor a more detailed introduction to the other Backbone classes, view their individual documentation pages.Backbone falls under the umbrella of MV* frameworks, which means that it is primarily composed of Models and Views. Models also have an event system that you can use to react when things happen to a Model. t('numberOfPages', 1) // changes numberOfPages to 1 fetch returns a promise (just like $.ajax), which you can use to trigger actions once the fetch has completed.Īttributes can be accessed or modified by using the get or set methods: huckleberryFinn.get('numberOfPages') // returns 64 When we tell it to fetch, Backbone will use jQuery to make an AJAX request for the book's data. ![]() Because Backbone knows the idAttribute is isbn, it knows that the URL for our new Book is /book/0486403491. When we created a new Book we passed it an object, and Backbone uses this object as the initial "attributes" (the data) of the Model. ![]() To create a new sub-class of a Backbone class, you simply call the extend method of the original class, and pass it the instance properties and (static) class properties as objects: const MyModelClass = ().done(() => console.log('the jQuery promise way')) show different pages) in response to the URL changes.īefore we look at how to use each of these components, let's first take a quick look at Backbone's class system. Router - enables a "single page application" by allowing an application to trigger different logic (e.g. View - represents a single part of the user interface each View wraps an HTML DOM element, and provides structure for working with that element as well as convenience features like simple event binding. Model - represents a single data object, but adds additional functionalities not provided by native JavaScript objects, such as an event system and a more convenient way to retrieve and send data to a remote serverĬollection - represents a set or "collection" of Models and provides functionalities to manage its models. Backbone.js is made up of four separate components: Collections, Models, Routers, and Views. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |