![]() One last step: we defined the DetailView but we never rendered it! So, in our (document). It’s up to you and the project you’re working on. Or you may want to fetch another model or collection based on that and populate the detail view. Rather than just displaying the name, you may want to display a whole heap of data. So we can keep a reference to this object in our view’s model.įinally, in the render() method we have a simple conditional statement to display a default message if no master is selected, or the name of the currently selected master. In this case, it’s going to be a master model. The onMasterSelected method has an argument, which is the data that we published with the event. That’s why we pass “this” (a pointer to the view itself) as the third argument to this method. We want “this” in that method to refer to the view itself. When the handler (onMasterSelected) is called, by default, “this” has a different meaning. Router and History: A set of objects that manage the browser's history with URL hash fragments or HTML5's pushState technology. The second argument to this method is the name of our event handler (onMasterSelected in this case). Every object in Backbone.js includes the Events system, allowing every Backbone.js object to trigger events and handle them. In the initialise method, we use the on() method to subscribe to the “master:select” event. This.$el.html("Please select an item from the master list.") So here is our DetailView:Īpp.eventBus.on("master:select", this.onMasterSelected, this) Now, who is the subscriber? The detail view, which we haven’t implemented yet. The subscriber will then receive this data with the event. The second argument to this method is the data we would like to publish. In this case, “master:select” simply means master is selected. You can use any name you would like, but it’s a good idea to use namespaces (note the colon). The first argument to the trigger method is the name of the event. Now, we need to change our MasterView to publish an event instead of displaying an alert:Īpp.igger("master:select", this.model) The eventBus object here derives from Backbone.Events, which provides the base functionality for publishing and subscribing to events. Next, to render a list of masters, we need a collection and a collection view:Īpp.Masters = (, Backbone.Events) Now, let’s define a model and a view for our masters: To render the list of master items, we need a model, a view for rendering each model, a collection and a view to render the collection.įirst, let’s start by creating a namespace for our app.įrom this point, any model, collection or view we define, will hang off this App object, rather than the global window object. To make our containers more visible, let’s add the following CSS: When the user clicks on a master, the “detail” container will be refreshed showing the details for that master. We use the “masters” container to render a list of master items. ![]() We need two separate containers in our HTML: one for the master view, the other for the child view. If you prefer a step-by-step approach, it’s best to have a look at the link above to have an idea what we’ll be building. If you want to jump to the final solution, here is the JSBin link: One of the common questions amongst developers starting with Backbonejs is: how should I implement hierarchical (master-detail / parent-child) views with Backbone? So, in this post I’m going to present a clean solution that gets you started. ![]() ![]() April 13th, 2015 Comments Hierarchical Views with Backbone We can override this function to provide custom behavior for it. Initialize function and Constructor in Model initialization: Whenever we create a model, BackboneJS will invoke its constructor. It monitors application data, performs validation on data, and provides a mechanism to maintain local data on localstorage. Models in Backbone.js are also the most important component when building the backbone.js application. Actions such as the ability to validate data, the ability to maintain data, define access to different parts of the data contained in the model. Along with keeping the data, the Model class performs various actions on the data. Model is where all application data is stored. It is designed for minimal and flexible, and it works well with other libraries and frameworks, such as Underscore.js and jQuery. Introduction: When we talk about any MVC model, Model is undoubtedly the most important part of the architecture of applications. Backbone.js is a JavaScript framework that provides the structure of web applications by separating the application’s data (models) from its presentation (views) and its logic (controllers). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |