Question

This seems like a trivial question where I’m likely stumped on the syntax.

Basically, I would like a FancyBox to load a BB View that I have when a link is clicked.

Previously, it would load a BB route, and redirect to a page with the desired view and everything else :

$('.edit_list').show().attr('href', '#lists/' + list.id + '/edit')

my current view

app.views.GlobalListEdit = Backbone.View.extend({
  tagName: "div",
  className: "global_list_edit list_view",
  title: 'Edit - ',
  template: _.template('<div class="error"></div>' +
    '<label for="global_list_edit_name">Group Name</label>' +
    ... truncated ...

my current jquery

  $('.edit_list')
    .on('click', function(){ 
      // $.fancybox({ href: '#' + '#lists/' + list.id + '/edit' });
      // ^ bad idea #1 . This loads the whole other page sans the actual edit form..
      // $.fancybox({ new app.views.GlobalListEdit({el: $('body')}).render() });
      // ^ This psuedo code is more or less what I want. To load a new instant of the BB View.
      return false;
    });

So I’m lookin to..

1. answer how to pass the dynamic list.id to that edit call.
2. how to render that view.

Thanks!

Answer 1

You can hand $.fancybox a jQuery object and views have an $el so you could do this:

var v = new View({...});
$.fancybox(v.render().$el);

Demo: http://jsfiddle.net/ambiguous/ncmd7/

Or you could hand $.fancybox the DOM element:

var v = new View({...});
$.fancybox(v.render().el);

Demo: http://jsfiddle.net/ambiguous/t7Sbj/