在EmberJS 2中通知路由更改的组件 [英] Component to be notified on route change in EmberJS 2

问题描述

我的任务是开发一个Ember 2应用程序的菜单组件。这将是一个复杂的组件，其视觉表示随用户通过路由而改变。例如，当在/ index路由上应该禁用特定菜单及其所有项目，但是在/ details等上启用它及其某些项目。

所以，我有一个组件通过一个单例模型（存储在一个服务当前，btw，它是一个正确的地方存储全球可用的单例模型在Ember？）。它显示的东西很好，但它不尊重当前的路线，也不会抓住路线的变化，因为用户通过该应用程序。如何实现？

总结：

1. 组件需求以某种方式获取当前路由以能够显示其初始状态，例如用户将/ details页面加入书签并访问它。


2. 组件必须以某种方式处理路由更改。


3. 服务是一个举办单身模式（可能会从服务器获取）的好地方。

您可以提供您如何解决上述三种情况的想法吗？

解决方案：好的，这是怎么做的，谢谢@ Bek的建议： / p>

 从ember导入Ember; 
 
导出默认Ember.Component.extend（{
路由器：Ember.inject.service（ - 路由），
 
 didInsertElement：function（）{
 let r = this.get（router）; 
 console.log（初始路由，r.get（currentRouteName））; 
 
 r.addObserver currentRouteName，这个currentRouteNameChanged）; 
}，
 
currentRouteNameChanged：function（router，propertyName）{
 console.log（router.get（currentRouteName ））; 
} 
}）; 
  

更多问题:) - 我不得不环绕 currentRouteNameChanged 带有引号的函数名（使其成为一个字符串）否则没有被调用。我假设我错过了非常基本和明显的东西？

还有一个问题是时髦的服务名称 -routing @Bek，有什么提示我可以自己弄清楚，有没有可以注册的东西的列表我可以查找信息？我还没有在Ember文档中假设，但是它的源代码在哪里检查出来？ - 一般来说，$ code> -routing 的名称是否会成为 *路由或最终版本的东西？

解决方案

答案1和2：
在最新版本的ember 2.x（至少2.2）路由器可作为服务使用，因此您可以将其注入组件路由器：Ember.inject.service（' - routing'）并观察 currentRouteName ，但它是当前的私人服务，所以应谨慎使用，因为它可能会改变（可能重命名为路由） ，还有rfc https://github.com/emberjs/rfcs/pull/38

Anser to 3：
服务通常是无状态的，但是可以有异常和服务来共享全局逻辑/对象，所以这不是一个坏主意p>

My task is to develop a menu component for an Ember 2 app. This is going to be a complex component whose visual representation changes as the user goes through routes. For instance it should disable particular menu and all its items when on "/index" route but enable it and some of its items when on "/details" and so on.

So, I've got a component that is passed a singleton model (stored in a Service currently, btw, is it a right place to store globally available singleton models in Ember?). It displays the stuff well but it does not respect the current route nor catches the route changes as user goes through the app. How can I achieve it?

Summing it up:

1. The component needs to get current route somehow to be able to display its initial state, for instance the user bookmarked the "/details" page and visited it.
2. The component has to deal with route changes somehow.
3. Is a Service a good place to hold a singleton model (which could potentially be fetched from server).

Can you provide your thoughts on how to tackle the three above?

SOLVED: Ok, here's how it is done, thanks to @Bek's suggestions:

import Ember from "ember";

export default Ember.Component.extend({
    router: Ember.inject.service("-routing"),

    didInsertElement: function() {
        let r = this.get("router");
        console.log("Initial route", r.get("currentRouteName"));

        r.addObserver("currentRouteName", this, "currentRouteNameChanged");
    },

    "currentRouteNameChanged": function(router, propertyName) {
          console.log(router.get("currentRouteName"));
    }
});

MORE QUESTIONS :) - I had to surround the currentRouteNameChanged function name with quotes (to make it a string) otherwise it was not called. I assume I miss something very basic and obvious here?

One more issue is the funky service name -routing - @Bek, any hints on how could I figure it out myself, is there a list of injectable stuff I could look up information in? It is not yet in Ember documentation I assume but where in the source code of it to check it out? How stable -routing name in general, would it become *routing or something in final version?

解决方案

Answer to 1 and 2: In latest versions of ember 2.x (in 2.2 at least) router is available as service so you can inject it to component router: Ember.inject.service('-routing') and observe changes on currentRouteName, but it is currently private service so should be used with caution as it might change (might be renamed to routing), there is also rfc https://github.com/emberjs/rfcs/pull/38 which proposes routable components which will be part of ember in the future.

Anser to 3: Services usually stateless, but there can be exceptions and services made to share global logic/objects so it is not a bad idea

这篇关于在EmberJS 2中通知路由更改的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！