Archive for the ‘Backbone’ category

How to dynamically set the template in a Marionette ItemView

December 28th, 2012

Don’t judge me on this, I am just trying to offer some help, this took me a lot longer to figure out that it should have, but I am glad I figured it out and I thought I would throw this out there for anybody else struggling with it too. I beat my head into the wall trying to set the template for an itemview and it turns out it was stupid simple, as outlined in the code below:

var v = new this.options.itemsView({
    collection: l,
    itemView: yourItemView.extend({ template: "<div>yourTemplate</div>" })
});
//show it in your region
this.listing.show(v);

As you can see, all you have to do is use the extend method of the itemView and set the template inside of that and voila. This may not be the recommended way of getting this done but it works for me and its nice and simple and allows for some very clean code. I hope this helps someone, enjoy!!

Creating a grouped tablerow using Twitter Bootstrap and Backbone Marionette

November 9th, 2012

I have been working on a project where I need data grouped or summarized by date, and I wanted to make use of Backbone and Marionette with its CompositeViews and ItemViews so I whipped up an example, check it out below

It makes use of a Marionette CompositeView to create a table and then takes that and an ItemView to create rows that are wrapped with the Twitter Bootstrap accordion control to do the collapsing of the rows, how sweet is that??

Validate Subcollections in Backbone models

October 26th, 2012

Backbone.js is an awesome library for Javascript development, and at some point in your application, probably close to the finishing point, you will want to validate your models and Backbone has provided a great function through that, find out more about that here: http://backbonejs.org/#Model-validate. As I was adding validation to my models I had the need to validate my subcollections that were in my models and I just didn’t see a good way to do that besides sending up my subcollections via the posts or the save() method in backbone, which I don’t want to be doing until my main model is ready to be sent up.

I know its wrong or bad coding to be adding unvalidated models to your collections but in my situation it was necessary so I came up with a little method of validating those models, check out the snippet below:

validate: function (attrs) {
           if (attrs.Products.length == 0) {
                return "Please choose at least one product";
            } else {
                var error;
                var that = this;
                attrs.Products.each(function (prod) {
                    error = prod.validate(prod.attributes);
                });
                if (error)
                    return error;
            }
}

As you can see in the validate function of the main model it simply iterates over each ‘Product’ in the Products collection and calls validate on those products and if an error is thrown down in the product model it will bubble up to my main model and thus show the user the error. Its a simple solution that I kind of expected backbone to be able to handle for me but everybody out there just says to validate your model before it goes into the collection but there are situations where that just isn’t possible. I hope this helps someone out, have a great day!!

Building CouchApps (My latest adventure)

June 7th, 2012

I have been working with CouchDB for quite some time as you may have seen in my past blog posts and after a lot of research I came across the idea of a CouchApp as described here: CouchApps The idea is simple, communicate with your database straight instead of using an application server like Rails or ASP.net MVC, let the database be your storage and application server. So far so good, what I especially love about how they function is the deployment aspect of it, you can deploy your site as easy as opening up your command line and typing in “couchapp push http://yourserver.com/yourdbname”, it really is that easy. If you couple this with Backbone.js like with this connector: Backbone-Couch Connector you have a very clean and efficient webapp. I will make more posts about this in weeks to come as I am very excited about the things I am learning about it.