用backbone.js渲染布局

StackOverflow https://stackoverflow.com/questions/4309954

  •  29-09-2019
  •  | 
  •  

题

如果您要使用Backbone.js和jQuery构建单页Web应用程序（SPWA），以示例 - 两个控制器都需要一个唯一的页面布局，您将如何呈现布局？

  • Controllera是三列布局。
  • 控制器是两列布局。
  • 默认路由激活Controllera.Welcome（） - 初始渲染。
  • 两个控制器都在其列中呈现出不同的视图，以利用所有骨干。JS模型/视图优点。

问题

当用户请求映射到控制器的路由时，整个页面布局需要更改以不再使用Controllera布局。这将隐藏Controllera的布局并显示Controllerb的布局 - 或者如果尚未在DOM中呈现布局。

我的第一个想法

您会使用backbone.js视图渲染布局，然后用它的模型结合视图渲染每列？

我的第二个想法

您是否会在控制器中添加设置/布局方法，该方法使用jQuery渲染布局，然后允许负责路线的操作？在控制器中使用jQuery对我来说有点不合时宜，但是，我希望控制器负责确保其路线可见正确的布局。

这是我第二个想法的片段：

var Controller = Backbone.Controller.extend
({
    routes :
    {
       "" : "welcome" // default action
    }
    /** Constructor **/
    ,initialize: function(options)
    {
        console.log('Workspace initialized');               
    }
    // LAYOUT
    ,renderLayout : function ()
    {
        console.log('Rendering Layout.');
        var $ = window.$;
        var layout = require('js/layout/app/big_menu');
        $(layout.parent).html(layout.html);
    }
    // ACTIONS
    /** Default Action **/
    ,welcome : function ()
    {
        this.renderLayout();
        console.log('Do the whole model/view thing...');
    }
});

谢谢你

感谢您抽出宝贵的时间回应。我很感激！

有帮助吗？

解决方案

我更喜欢已经将应用程序的骨架放在页面上。因此，您拥有页面上具有不同元素的完整布局，并且可以针对这些元素创建骨干视图，从而正确布置它们。

当您有单个布局时，这会很好地工作，当您拥有多个布局时，事情会变得有趣。您可以将所有布局放在页面上，并根据逻辑隐藏不同的配置。您可以看到布局是层次结构的初始视图。因此，您呈现布局，然后进行视图加载。

没有真正的方法。每个人都有利弊。我不做的一件事是在控制器中渲染布局。我将所有渲染和HTML都放在视图中，以便我可以在控制器和模型上处理逻辑（在此处考虑MVC）。

其他提示

我倾向于同意朱利安（Julien）的观点 - 很高兴保持您的布局尽可能无状态。至少，一切总是以骨架形式布置在页面上。当需要显示特定的布局或配置时，您会懒惰地渲染其内容，并用CSS显示UI的部分。相互排他性的CSS课程对此很有用，例如：“ Projects-open”，“ Documents-open”，“ Notes-open”。

我正在使用Backbone.js设计基于模块的Intranet系统，并且基本上在文档负载上使用以下算法。

  • 创建AppController，该应用程序的单例控制器。
  • AppController创建主视图，这是负责呈现页面骨架的视图，并在页面上的持久性项目（登录/注销按钮等）进行处理。
  • Mainview为页面的不同部分，导航，面包屑，标头，工具栏，ContentContainer等创建了许多儿童视图。这些是应用程序的固定装置，尽管它们各自的内容确实可以改变，但它们不会改变。浓缩的内容可能包含任何布局。
  • AppController通过注册模块运行，为每个模块启动Mainmodulecontroller。这些都有名称空间路由模式。
  • backbone.history.start（）

ModuleController都可以在INIT上访问AppController。在捕获哈希地点时，他们将PageChange事件发送到包含PageManifest对象的AppController。 PageManifest对象包含设置各自视图所需的所有信息，例如面包屑信息，标题信息，最重要的是，引用了实例化的ContentView。 AppController使用PageManifest中的信息来设置不同的持久视图，在ContentContainer中删除前面的ContentView，并将模块提供的ContentView插入到容器中。

这样，不同的设计师可以在不同的模块上工作，而他们只需要知道的只是PageManifest对象的规范以及ContentView的外观。他们可以设置自己的复杂路由系统，使用自己的模型和自定义的ContentView（尽管我们计划拥有一个listViews，ObjectViews等库，以继承）。

我们现在处于设计阶段，因此我无法真正保证这是我们最终使用的设计，或者我们在其中没有任何漏洞，但是从概念上讲，我们认为这是合理的。评论？

无论骨干或任何其他JS框架/库，我都有完全相同的问题。

想象一下，您的表单视图中有一个符号，需要单个列布局，然后将视图注入该单个Div。

然后，一旦成功地签名，就以某种方式渲染了另一个布局（假设标题区域，页脚区域，左侧区域，然后为其他所有内容提供主区域（右列）。

标题可能包含徽标视图（如果具有功能）和全局/用户菜单视图。左侧区域将包含主要导航视图。

然后是进一步的复杂性。主导航视图中的每个链接都加载了一个新的子布局，准备进一步的视图将自己注入。

我不希望常规的控制器/视图来关心当前呈现的布局，只是存在它们的容器元素并准备被注入。

我考虑过以巧妙的方式使用路线（不是传统意义上的）类似的方式：

function LayoutController() {
App.addRouteMatcher("/sign_in/*", this.renderSignInLayout); // single column
App.addRouteMatcher("regex to represent anything but sign_in", this.renderMainLayout); // header, footer, primary nav, main zone
App.addRouteMatcher("/section1/*", this.renderSubLayoutForSection1); // puts a 1 column layout in the main zone
App.addRouteMatcher("/section2/*", this.renderSubLayoutForSection2); // puts a 2 column layout in the main zone 
}

这意味着，如果路由为“/pection1/nather/sub/page/ins/ection/1”，则上方的两个路由匹配器“ regex表示sign_in”和“/section1/*”都将运行，这意味着主要的布局将被渲染，然后在有意义的情况下呈现第1节子布局。

然后，所有其他普通控制器都使用传统意义上的路线。

需要有一种很好的方法来管理布局，并确保安全地拆除这些布局，子布局和视图，以确保在其他原因中处理内存泄漏。

很想听听一个设计和实施优雅的人。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top