如果骨干路由器或视图句柄获取数据并显示加载状态?

问题描述:

在我的应用程序很多地方以下模式发生了:

In many places in my app the following pattern happens:


  • 用户点击某个环节触发导航

  • 数据需要获取渲染视图

  • UI设计需要一个加载微调器显示在数据被取出

  • 一旦数据被取出我们展示了渲染视图

我曾尝试以下两种实现模式的:

I have tried both of the following implementation patterns:


  1. 路由器处理提取

  1. Router handles fetching


  • 路由器告诉容器视图来显示加载微调

  • 路由器负载的所有集合/模型

  • 路由器告诉容器以隐藏加载微调

  • 路由器通过集合/模型视图,使得它

查看处理提取


  • 路由器只是创建和呈现视图

  • 视图获取它需要
  • 集合和模型
  • 在当前视图首次呈现,它只是显示加载微调,因为数据仍在加载

  • 当数据到达时,模特/集火事件和视图绑定到这些,因此重新呈现自身,从而隐藏加载微调并显示众目睽睽

我不喜欢#1,因为路由器成为型号/系列的一个巨大的球取逻辑,似乎有太多的责任。 #2好像责任更好地分配(路由器只是决定哪个视图来显示,鉴于计算出它所需要的数据获取),但它确实使视图渲染有点麻烦,因为它现在是有状态的。

I dislike #1 since the router becomes a gigantic ball of Model/Collection fetching logic and seems to have too much responsibility. #2 seems like a better allocation of responsibilities (router just decides which view to show, view figures out what data it needs to fetch), but it does make the view rendering a little trickier since it's stateful now.

什么是*的社会思考? 1,2,还是其他什么东西?

What does the * community think? 1, 2, or something else?

这帖子是pretty老了,但是我们今天早些时候进行了审查,所以如果任何人遇到的:

This post is pretty old, but we were reviewing it earlier today, so in case anyone else comes across it:

要我,我真的看到2个独立的问题:

To me, I really see 2 separate questions:


  1. 获取数据的机制和结果视图渲染应该在哪里发生,在路由器或看法?

  2. 的意见应该已经期待解决的机型,还是应该以模型回应说,仍可以加载?

我们如何处理这一点与一些个人preferences混合:

A bit of how we handle it mixed with some personal preferences:


  1. 都不是,虽然我瘦更接近路由器。路由器应该处理路由,意见应办理查看和别的东西应该处理机制和型号/系列取逻辑流程。我们称之为别的一个控制器,该路由器基本上代表们。

  2. 当Yuri暗示,有时是一个现实。我想这大概是由案件的判决情况,但最终应了控制器和视图之间的合同,而不是路由器/视图之间。

我喜欢尤里的要点,与一​​对夫妇的注意事项(缩进子弹):

I like Yuri's bullet points, with a couple caveats (indented bullets):


  • 路由器只知道向何处发送用户

  • 外视图只知道用户什么应该被观看(由于其数据)的结果

    • 假设外部视图是特定的内部视图的使用案例,是由另一种观点认为拥有(用于清理)

    • 否则,对于普通的容器(如渲染成一个'主'的位置),我们发现它非常有用的,它管理某一部分的意见在页面上的组件 - 我们称之为渲染


    • 在一个通用的容器的情况下,它会最终成为渲染的责任

    渲染器的主要原因是处理与该节相关的东西,比如清理现有的意见,以避免鬼意见,滚动顶端上渲染(我们MainContentRenderer创建),或显示在这种情况下微调。

    The main reason for the Renderer is to handle things related to that section, like cleaning up existing views to avoid ghost views, scrolling to the top on render (our MainContentRenderer does that), or showing a spinner in this case.

    什么是可能的样子,对于A psuedo- code-ISH例如:

    A psuedo-code-ish example of what that might look like, for:


    • 通用​​内容目标'主'(如果它是用特定的情况下,可能会更好用的ComponentView按尤里的例子,这取决于你的观点生命周期管理战略)

    • 我们需要获取并等待
    • 模型
    • 接受已加载模型的视图

    路由器:

    routes: {
        "profile": "showProfile"
    },
    
    showProfile: function() {
        return new ProfileController().showProfile();
    }
    

    ProfileController可:

    showProfile: function() {
        //simple case
        var model = new Model();
        var deferredView = model.fetch.then(function() {
            return new View(model);
        };
        MainContentRenderer.renderDeferred(deferredView);
    }
    

    MainContentRenderer:

    var currentView;
    
    renderDeferred: function(deferredView) {
        showSpinner();
        deferredView.then(function(view) {
            this.closeSpinner();
            this.closeCurrentView();
            this.render(view);
        }
    },
    
    render: function(view) {
        currentView = view;
        $('#main-content').html(view.render().el);
    }
    
    closeCurrentView: function() {
        if (currentView and currentView.close()) {
            currentView.close();
        }
    }
    

    引入一个控制器也具有可测性的好处。例如,我们周边的URL管理执行搜索,结果一个视图和一个新的搜索视图之间选择,并缓存'最后'的搜索结果之间的选择和执行新的搜索复杂的规则。我们有茉莉花测试的控制器,以验证所有的流逻辑是正确的。它还提供了一个与世隔绝的地方来管理这些规则。

    Introducing a Controller also has the added benefit of testability. For example, we have complex rules for performing searches around URL management, picking between a results view and a new search view, and picking between a cached 'last' search result and executing a new search. We have Jasmine tests for the controllers to verify that all that flow logic is correct. It also provides an isolated place to manage these rules.