1

我正在使用 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>

每个 Note 都是一个主干模型。我有一个 Notes 视图，负责拥有上面看到的集合的 HTML 内容，还有一个 Note 视图，负责渲染每个 Note 模型。
问题在于，每个 Note 模型所需的输出都由 HTML 的两个“部分”组成，位于 Notes View 拥有的 DOM 的不同部分（标题和内容）中。

我的问题是，您如何工作以使 Note View 上的 render() 方法能够返回必要的 HTML 以插入标题和内容？

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

感谢您提出进一步阅读的建议。

4

1 回答 1

1

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

或者，无需尝试将 Note Model 与 View 强制为 1 对 1。如果我想为您提供的 html 提供单独的视图，我将有类似“NoteTitleView”和“NoteContentView”的东西，它们都接受选项中的 NoteModel。

于 2013-10-19T17:13:25.523 回答