主干项目视图需要将 HTML 放入选项卡中

Backbone item view needs to put HTML into tabs

本文关键字：选项 HTML 项目 视图      更新时间：2023-09-26

我正在使用Backbone和Bootstrap。 我的目标是以动态生成的笔记列表结束，笔记标题位于左侧垂直堆叠的选项卡列表中，注释内容位于右侧选项卡窗格中。

以下是一些快速的 HTML 演示：

<div class="row">
    <div class="col-md-2">
        <ul class="nav nav-tabs nav-stacked">
            <li><a href="#note1" data-toggle="tab">Note 1 Title</a></li>
            <li><a href="#note2" data-toggle="tab">Note 2 Title</a></li>
        </ul>
    </div>
    <div class="col-md-10">
        <div class="tab-content">
            <div class="tab-pane" id="note1">Here is note 1's content</div>
            <div class="tab-pane" id="note2">Here is note 2's content</div>
        </div>
    </div>
</div>

每个音符都是一个骨干模型。 我有一个 Notes 视图，负责拥有上面看到的集合的 HTML 内容，还有一个 Note 视图，负责呈现每个 Note 模型。
问题在于，每个 Note 模型所需的输出都由 HTML 的两个"部分"组成，它们位于 Notes View 拥有的 DOM 的不同部分（标题和内容）。

我的问题是，您如何工作以使注释视图上的 render（） 方法能够返回必要的 HTML 以戳入标题和内容？

感觉它不能在一个返回值中返回两个项目，也许我需要返回一个包含两个元素"title"html和"content"html的数组。 这是在Backbone中解决此问题的规范最佳方法吗？

非常感谢

收到进一步阅读的建议。

使用单个视图（您的"NotesView"）而不是使用子视图来呈现整个内容会降低复杂性。您可以将每个注释元素与 data-id 或 data-cid 属性相关联，以便在发生感兴趣的事情（删除等）时，可以从集合中获取事件处理程序中的相应模型。然后，您可以在模板中对 Notes 集合进行迭代。

或者，无需尝试强制注释模型与视图为 1 比 1。如果我想为您提供的html提供单独的视图，我会有一个类似于"NoteTitleView"和"NoteContentView"的东西，它们都接受选项中的NoteModel。

相关文章：