![]() ![]() There is another way to handle this scenario, though it has it’s own cost. Other similarly simple lists, where there is very little action taken on individual itemsīeyond simple lists like this, though, this pattern can get out of hand quickly.A list of items with tags that link to a route or another url / page entirely.A list of items for display purposes only.If you’re careful when you head down this path, you can limit it’s use to simple lists that don’t need much (if any) action taken on the individual model. There are some benefits to using this approach, in spite of the above problem. Neither of which sounds like fun to maintain, in my opinion. This is going to be a small performance hit and also cause a lot of extra code to be written in views and a lot of additional data-id attributes in our HTML elements. We have to get the id, find the model from that id, and then we can do stuff with it. In this case we’re using an event in a Backbone view, but the concept is the same. This wreaks of using backbone as a stateless web server – having to “post back” some data with an id and then looking up the actual item so we can use it. ![]() There’s a few problems that we introduced by taking the route of using data-* attributes, all of which can be summed up in one statement: stop using Backbone as if it were a stateless web server.īy using a data-id attribute, we’re forced to look up the model based on the id of the model as shown in the previous code snippet. Here’s the code running in a JSFiddle The Problem Introduced By The Solution Then we can get the model from the collection, get the name and show an alert box. Now that we have a data-id attribute in place, we can grab it from the element that we clicked. In this case, we’ll add a data-id attribute and store the id of the model, to our template. This is a set of attributes that lets us add whatever data we want, and still be valid (some browsers ignore attributes they don’t know about). The “best” approach for this currently is to use the HTML5 data-* attributes. To know which item we clicked, we need to attach some meta-data to the tag that tells us exactly which model we are trying to deal with. Since the `el` in this example is being generated by the view, as a `ul` tag, the click event is wired up to all of the tags in each of the tags. This is because the events declared in a view use the view’s `el` element to wire up the events. But how do we do this? The click event that we set up listens to any and all clicks for any and all tags in our list. The goal of this sample code is to show an alert box stating the item’s `name` attribute when we click on a link. We are also setting up a click event for the tags in our list. ![]() We’re looping through each of the models in our collection and rendering an item to produce a nice little list. In this example, we are rendering a list of items inside of a view. Instead of trying to choose one or the other all the time, it’s best to understand each of these approaches and be able to recognize the scenarios where each fits best. There is another way of approaching this which eliminates some of those limitations, but also has it’s own challenges: rendering one View object per Model. It has it’s advantages but it also presents a set of challenges and limitations. There’s nothing necessarily wrong with this approach. The usual source of this question is that the developer has decided to use a single View object and template to render the entire list of Backbone Models. I rendered all my models using a template, but when I click on one of them my event handler fires for all of them. How do I get the model for the item that I clicked? I have an HTML element rendered for each model in my collection. I see variations of these questions on StackOverflow quite frequently: By extending the Collection class, it also makes the collection constructor function to be attached with properties like instance properties and optional classProperties that hold the : Getting The Model For A Clicked Element 11 October, 2011. A Collection can also be created by simply extending a Collection class of Backbone. We created a Model and View by simply extending the respective classes of Backbone. ![]() This is similar to what we did with the Backbone.Model and Backbone.View classes. In this tutorial we will discuss these methods.ī(properties, ) Methods/Attributes in Backbone Model: Part 4Ĭollections hold instances of models, in other words an ordered set of models that provide various types of methods for various operations.Model Validation in Backbone.JS: Part 3.If you are new to this series of Backbone.js, I recommend you go through the previous articles: ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |