How can I have links which do different things in Backbone.js without using eval()?

Question

I have links which I want to do different things depending on the link. Therefore I have a datastructure:

var data = [{"name":"foo", "onClick":"baz()"}, {"name":"bar", "onClick":"bam()"}];

Currently, in the view i have a function run which takes the item and does eval(item.onClick), and that works, just it feels like a security hole. I could put the onClick into the html when rendering the view, but that feels wrong.

Does anyone know of a way to do this?

Answer 1

You can embed function in the data

var data = [{"name":"foo", "onClick":baz}, {"name":"bar", "onClick":bam}];
item.onClick();

You can look here for more helpful stuff how to do it

Answer 2

Backbone views have a delegateEvents function :

var MyView = Backbone.View.extend({

  events: {
    "click button[name='foo']": "baz",
    "click button[name='bar']": "bam"
  },


  baz: function(){ ... }

  bam: function(){ ... }

Answer 3

Easy -- even if you don't implement an object container for your function call.

function baz(){ 
    ....
}
function bam(){ 
    ....
}

And, assuming you have this as your JSON callback:

function jsonCallback(data){
    /*some code*/
    window[data.onClick]();
    /* some more code */
}