backbone.js - 您如何在 Backbone 中附加您的 subview ?

标签 backbone.js

我有一个 Backbone 应用程序,它在您导航到的每个页面上呈现几个相关 View 。例如,一个页面呈现以下 View :

  • 上下文栏
  • 下拉菜单
  • 分页
  • 主表
  • 表格行

  • 这里的主 TableView 是我的路由器第一个附加到 DOM 的 - 在这个 View 中 reset绑定(bind)到 appendRows其中的函数 - 在每个表行中添加:
    // Instantiate the view, render and append it to the DOM
    var tableView = new TableView({ collection: blahCollection });
    $("main").append(tableView.render().el);
    
    // Fetch the latest data for the collection (triggers a reset which appends rows)
    blahCollection.fetch();
    

    这对我来说似乎是合乎逻辑的,但是当谈到添加分页 subview 时,我问自己一个问题,“ View 是否真的应该控制附加到屏幕上的内容”?

    因此,给定分页示例:
  • View (在这种情况下是主 TableView )是否应该控制如何/何时将分页附加到 DOM?
  • 应该是路由器吗?如果是这样,它应该调用父 View 上的函数来执行此操作 - 还是应该将逻辑完全保留在主视图之外?
  • 最佳答案

    我喜欢让我的路由器为我做很多高级别的事情。例如,我将设置一个基本布局......像这样:

    <body>
        <div id="contextBar">
            <div id="menus"></div>
            <div id="pagination"></div>
        </div>
        <div id="mainTable"></div>
    </body>
    

    然后,在我的路由器处理程序中,我将连接彼此无关的 View :
    var contextView = new ContextView({el: $("#contextBar")});
    var menusView = new MenusView({el: $("#menus")});
    var paginationView = new PaginationView({el: $("#pagination")});
    var tableView = new MainTableView({el: $("#mainTable")});
    

    就主表而言,我看到 TableView 和行 View 紧密耦合,因为它们彼此直接相关,所以我通常让 Collection View (您的 TableView )创建和管理单个项目 View (您的表行 View )。

    至少,这就是我使用 Backbone 组织代码的方式。

    关于backbone.js - 您如何在 Backbone 中附加您的 subview ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7610632/

    相关文章:

    javascript - Backbone 模型未定义,但已加载下划线和 Backbone

    javascript - 没有获取正确的 url 问题

    Backbone.js:只需一行设置本地存储?

    html - Bootstrap Navbar-固定底部粘性页脚

    javascript - 将数据绑定(bind)到 DOM 的示例

    Javascript 在 if 中设置值

    jquery - iOS Safari 调试控制台 - 如何获取错误的行号?

    javascript - Jasmine 找不到 Backbone.js 模型

    jquery - 当一组字段失去焦点时触发 Backbone 事件

    javascript - 调试 Backbone 应用程序 - 查看 View 名称