Backbone Inheritance - RockyCode. Backbone has a great inheritance mechanism. It's as easy as Backbone.Model.extend(). This much is obvious. Let's try a few other things, like: Subclassing our own classes, calling to super classes, adding subclass attributes, and adding various subclasses to a collection based on a super class.
Let's just envision a potential application where we are modeling locations of different types. These examples are using AMD-style modules. Subclass Your Subclasses Location.js might look like this: define(function () { return Backbone.Model.extend({ // general state and behavior for all locations });}); In Location.js is where we want to put all general state and behavior across locations. Define(['Location'], function (Location) { return Location.extend({ // things that just a country knows and does });}); Boom! Calling Backbone Super It's super! Many times, we may want to put more specific behavior in a subclass, but we still want to execute the more general code in the superclass.
In Country.js: Backbone.js super() function - Some code from joshontheweb. Backbone patterns. Building apps with Backbone.js Here, I try to document the good practices that our team has learned along the way building Backbone applications. This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself. Table of contents Thanks. Efficient model memcaching. Posted by Nick Johnson | Filed under tech, app-engine, cookbook, coding This is the first in a series of 'cookbook' posts describing useful strategies and functionality for writing better App Engine applications. One common pattern in App Engine is using memcache to store entities retrieved from the datastore - either individual ones or a list of them - to avoid re-executing common queries. The natural pattern is something like this: from google.appengine.api import memcachefrom google.appengine.ext import db entities = memcache.get("somekey")if not entities: entities = MyModel.all().fetch(10) memcache.set("somekey", entities) This has several problems: Pickling in general is slow.
Previously, there wasn't really a way around this. Two new functions were added to the db module in release 1.2.5: model_to_protobuf and model_from_protobuf. Here's an example of using memcache to cache a single value: While efficient, this looks a little awkward. Congratulations! Previous PostNext Post. Michi Kono » Blog Archive » Adding a Centralized Event Dispatcher on Backbone.js.
This article contains my solution to adding a simple global event dispatcher to Backbone. It should also help noobies (myself included) understand how Backbone events work (which has one big gotcha). Sharing Events = Global Dispatcher Today, I came across a fairly mundane – and probably common – problem: I have two views that need to talk to each other. An example for this would be when you have a status bar in one corner that gets updated when a user completes an action in another area.
It turns out that Backbone (as far as I can tell) does not support this use case very well out of the box. Well, it does: it expects you to build that yourself. Backbone supports a model where you publish and subscribe to things happening in your views/models (commonly known as an “event dispatcher“). This is a common pattern. Event Dispatcher Gotcha: Native Events However, I felt both solutions weren’t quite there. Goals I came up with my own solution that accomplishes three main goals: Solution Code.
BigBinary Blog. Auto-Save User's Input In Your Forms With HTML5 and Sisyphus.js. Advertisement This article is the third in our new series that introduces new, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework that helps you build prototypes and production code. This time, we’re presenting Sisyphus.js, a library developed by Alexander Kaupanin to provide Gmail-like client-side drafts and a bit more. What Problem Needs Solving?
Have you ever been filling out a long form online or writing an eloquent and spirited comment when suddenly the browser crashes? Or perhaps you closed the browser tab accidentally, or your Internet connection cuts off, or the electricity goes down (and, being ever obedient to Murphy’s Law, you had no backup power supply). (Image: Kristian Bjornard) Imagine the storm of emotions felt by a user who had to add just a bit more information before submitting a form and then loses all data. Developmentseed/bones. Tbranyen/vertebrae. Backbone View-Model Binding | | BackboneFU, Resources for the Backbone.js developerBackboneFU, Resources for the Backbone.js developer.
This article briefly discusses how the Backbone.View class is normally used and then introduces a new class that helps makes it easy to synchronize your models and views. The Backbone.View class helps you do a couple of important things that I’ll discuss in very brief detail: (I assume that you are already familiar with Backbone.Views) Create browser DOM elementsListen to DOM element eventsListen to model events Create browser DOM elements: Backbone.View objects have a default view.el field that is a DOM element.
By default it’s a <div> but you can override it to be any type of element you want. Normally, the View.render( ) function’s main job is to fill the view.el with DOM elements that make up the view. The view also has a view. In almost all situations, you won’t inline your html inside of your view classes. Listen to DOM element events: Backbone.View class lets you define an events hash. The events are defined as jQuery delegates. Listen to model events: The ModelBinder: Tbranyen/backbone.layoutmanager. The Little Book on CoffeeScript - Classes. Classes in JavaScript seem to have the kind of effect that cloves of garlic have to Dracula for some purists; although, let's be honest, if you're that way inclined, you're unlikely to be reading a book on CoffeeScript.
However, it turns out that classes are just as damn useful in JavaScript as they are in other languages and CoffeeScript provides a great abstraction. Behind the scenes, CoffeeScript is using JavaScript's native prototype to create classes; adding a bit of syntactic sugar for static property inheritance and context persistence. As a developer all that's exposed to you is the class keyword. class Animal var Animal; Animal = (function() { function Animal() {} return Animal; })(); In the example above, Animal is the name of the class, and also the name of the resultant variable that you can use to create instances. Behind the scenes CoffeeScript is using constructor functions, which means you can instantiate classes using the new operator. animal = new Animal Instance properties.
Rendering Views in Backbone.js Isn't Always Simple by Ian Storm Taylor - Vimperator - FF13 - Developper. When I first started using Backbone, one of my biggest unsolved problems was finding a good pattern for rendering views. It seems like it should be easy, but there are lots of pitfalls that crop up in larger apps, so I’ll show you what we’ve settled on at Segment.io. The first problem with learning how to render views is that Backbone tutorials rarely go deep enough to run into any of the problems that larger apps have. Most projects aren’t as simple as the typical todo-list examples. So before we start evaluating different methods, here are my requirements for rendering a view: Render should be able to be called multiple times without side effects.
With those requirements in mind, here are some ways I’ve seen people rendering their views that don’t fit our needs: Unbinding DOM events by accident. You’ll often see people rendering a template using jQuery’s html() method: render : function () { this. That makes sense, and works perfectly if you never deal with subviews. Not using templates! Backbone.js.