Question

我正在创建一个网址管理器，用户可以将自己喜欢的网页网址加入书签，然后在文件夹中进行管理。

在应用加载期间，我会渲染一个视图，其中显示了用户创建的文件夹列表。此视图在页面加载时不可见。
然后用户导航到他的主页以查看网址列表
从那里，用户可以在文件夹中安排网址
用户点击网址视图中的“移至文件夹”图标
我想显示位于“移动到文件夹”图标下方的folderSelectorView绝对位置。我该怎么办？
此外，如果网址已经移动到某个文件夹，我希望在已移动网址的文件夹中的folderSelectorView中显示选中的标记。

我该怎么办？

以下是我加载文件夹列表的方法。

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

以下是网址视图的代码。

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可以是你想要的任何东西 - 包括通过jQuery选择器找到的现有html元素。

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-backbone-js/

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

1 个答案: