我如何在花式盒子中加载BB视图

Question

这似乎是一个微不足道的问题，我可能会被语法难倒。

基本上，我想要一个 FancyBox 来加载单击链接时拥有的 BB 视图。

以前，它会加载一个 BB 路由，并重定向到具有所需视图和其他所有内容的页面：

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

我当前视图

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 ...

我当前的 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;
    });

所以我在看..

1. 回答如何将动态list.id传递给该编辑调用。
2. 如何呈现该视图。

谢谢！

Answer 1

你可以$.fancybox一个jQuery对象，视图有一个$el，所以你可以这样做：

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

演示：http://jsfiddle.net/ambiguous/ncmd7/

或者你可以交$.fancybox DOM 元素：

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

演示：http://jsfiddle.net/ambiguous/t7Sbj/