Backbone:如何重用页面加载期间呈现的视图

Question

我正在创建一个url管理器,用户可以将自己喜欢的网页URL加入书签,然后在文件夹中管理它们.

1. 在应用加载期间,我渲染一个视图,显示用户创建的文件夹列表.此视图在页面加载时不可见.
2. 然后用户导航到他的主页以查看网址列表
3. 从那里,用户可以在文件夹中排列网址
4. 用户单击URL视图中的"移动到文件夹"图标
5. 我想显示位于"移动到文件夹"图标下方的folderSelectorView绝对位置.我怎样才能做到这一点？
6. 此外,如果网址已被移动到文件夹,我希望检查的标记出现在已移动网址的文件夹中的folderSelectorView中.

我该怎么办？

这是我加载文件夹列表的方法.

var folderColl = new FolderColl();
new FolderSelectorView({collection: folderColl});

这是URL视图的代码.

URLView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#URLTempalte').html()),
    events: {
        'click .FolderChange': 'showFolderSelector'
    },

    initialize: function() {
        _.bindAll(this, 'render');
    },

    render: function() {
        return $(this.el).html(this.template(this.model.toJSON()));
    },

    showFolderSelector: function() {
       // How should I display the view here
       // view should display below the "Move to folder" icon
       // Doing something like `new FolderSelectorView` is not what I'm after
       // since that will just re-render the view for every URL displayed
    }
});

Answer 1

您可以轻松地将骨干视图附加到现有HTML元素.您需要做的就是el在实例化时将视图传递到视图中.在el可以是你想要的任何东西-包括现有的HTML元素,通过jQuery选择找到.

var myEl = $("#someElementOnThePage");
var myView = new MyView({
  el: myEl
});

这会将您的视图附加到#someElementOnThePage元素,然后您可以像使用自己渲染一样使用它.

有关更多示例,请参阅我关于渐进式详细说明的博文:http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-骨干-JS /