【问题标题】:How do you maintain the page state, so that you can provide permalinks using emberjs?您如何维护页面状态,以便您可以使用 emberjs 提供永久链接?
【发布时间】:2013-08-10 17:20:22
【问题描述】:

我无法很好地了解您如何支持永久链接。这可能只是因为 emberjs 不支持永久链接。

我正在构建一个允许用户选择某些报告的 UI,因此在 ember 中这很容易,您只需添加一个接收 id 的路由“报告”,因此 URL 如下所示:

#/reports/10/

我需要的是一些额外的参数也出现在该 URL 中,例如开始和结束日期以及指标类型,例如

#/reports/10/metric/impressions/start/10-08-2013/end/11-08-2013

因此,如果我将这些参数粘贴到浏览器中,则需要获取这些参数,并且重要的是,当用户更改这些设置时,例如通过日期选择器,应更新 URL 以反映新参数。

编辑:

这是一个 jsbin 的链接,其中包含基于以下答案的解决方案。 http://jsbin.com/ucanam/703

【问题讨论】:

    标签: javascript ember.js


    【解决方案1】:

    只是将我的 2 美分投入到这个话题中。请注意,我在生产中使用这种方法,它工作正常。这个问题实际上有两个部分。

    1.如何拥有多个动态细分?

    Mike Grasotti 描述了一种使用嵌套资源的方法。这种方法有效,但我认为这种方法在这种情况下有点麻烦。

    为什么我觉得它很麻烦?

    路由是在 Ember 中分离关注点的一种方式。在这种情况下,我没有看到单独的问题。在我看来,您正试图在您的 URL 中反映表单的状态。我认为这应该是负责“形式状态”问题的一种途径。因此,我建议看一下以下帖子,其中我描述了如何为每个路由实现多个动态参数:Is resource nesting the only way to enable multiple dynamic segments?

    2。当您只更改表单中的一个参数时,如何触发序列化挂钩来更新 URL?

    问题是serialize hook 仅在使用新模型输入路线时触发。我猜你有一些逻辑,处理更改参数startend 的事件。我想在这种情况下您不会重新输入路线。那么在这种情况下如何再次触发序列化钩子来更新 URL 呢?我正在我的路由器中处理这样的事件,我正在使用以下代码:

    var currentRouteName = this.controllerFor("application").get("currentPath");//the ApplicationController stores the name of the current Route
    var url = App.Router.router.generate(currentRouteName);
    App.Router.router.updateURL(url);
    

    PS:你可以看看我的生产应用here。这个应用程序展示了德国电影院中最好的电影。即使您不懂德语,您也可以单击顶部区域中的控件之一并查看更新的 URL。我想这和你想要的差不多吧?

    【讨论】:

    • 很好的答案 - 这是一个更好的方法,我没有意识到这是可能的。
    • 好酷,这似乎是一个合理的方法,看看这个 js bin jsbin.com/ucanam/703 它有状态对象正在由表单更新,然后更新 url,还有一个控制器也作用于模型并正确更新所有内容。唯一我无法获得的是 ember 链接。
    【解决方案2】:

    我也想知道如何做到这一点。数据必须放在 URI 中,因为我们要共享链接,但您不想将应用程序位置与应用程序状态混淆。

    哈希:#/reports/10 将是告诉应用程序去哪里所需的最少信息。与位置无关的所有其他数据可能应该放在 URI 的搜索部分。我会建议这样的事情:

    #/reports?metrics=impressions&start=10-08-2013&end=11-08-2013

    理论上,您可以在输入路线时解析查询字符串,然后相应地更新您的模型。据我了解,当通过直接更改 URL 或单击链接导航到路线时,会调用路线的 model() 函数。

    不幸的是,实际上这并没有像我预期的那样工作。我不确定它是否只是 JSBin,但存在一些奇怪的行为,即与额外应用程序数据的链接实际上并没有导航,这是永久链接的重点。请注意,如果您遵循 JSBin 中的说明,则开始和结束日期取自 url,而不是默认值。这个概念可以扩展到使用 findQuery 等发送对不同模型数据的额外请求,所以几乎任何事情都是可能的。

    http://jsbin.com/abadet/7

    无论如何,它可能会给你一些想法。

    【讨论】:

      【解决方案3】:

      有几种方法可以在 ember 中完成这项工作。如果您需要为可能传递给报告的其他参数提供很大的灵活性,请查看ember-query,它为 ember 应用程序添加了查询字符串支持。

      另一种选择是使用嵌套资源。比如:

      App = Ember.Application.create({});
      
      App.Router.map(function() {
        this.resource('report', {path: '/reports/:report'}, function() {
          this.resource('metric', {path: '/:metric'}, function() {
            this.resource('start', {path: '/:start'}, function() {
              this.route('end', {path: '/:end'});
            });
          });
      
        });
      });
      
      App.StartEndRoute = Ember.Route.extend({
        model: function(params, transition){
          return transition.params
        }
      });
      
      <script type="text/x-handlebars" data-template-name="start/end">
      <pre>
      Report ID: {{report}}
      metric: {{metric}}
      start: {{start}}
      end: {{end}}
      {{log this}}
      </pre>
      </script>
      

      查看jsbin 的工作示例

      【讨论】:

      • 我在 pre 之后添加了 {{view Ember.TextArea valueBinding='metric'}} ,然后在我键入时更新指标值,但它没有更新 url,这是需要的.
      • 我认为您想要的不是将 url 更改为人员类型,而是当他们完成时,喜欢加载另一个报告正确吗?要切换到新报告,请使用 transitionTo 并传递适当的参数,就像那个 jsbin 中的 linkTo 一样。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-01
      • 2010-10-02
      • 2011-03-16
      • 2016-09-02
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多