Decorator (Scope) / watch函数未被调用

Question

这是我的Decorator:

@Decorator(selector: '[navbaractivator]')
class NavbarActivator {
final _logger = new Logger('webapp_base_ui.sample.flexbox.navbaractivator');
final Scope _scope;
final Router _router;
  NavbarActivator(this._scope, this._router) {
  _logger.info("NavbarActivator");
  _scope.watch( _router.activePath,(value, previousValue) {
      _logger.info("Changed");
  },collection: true);
}
}

下面是相应的html代码片段:

<h2>Navigation</h2>
<ul class="nav nav-pills nav-stacked" navbaractivator>
    <li><a href="#/first">Home</a></li>
    <li><a href="#/second">Second</a></li>
    <li><a href="#/third">Third</a></li>
    <li><a href="flexbox.html" target="_self">JS-Version</a></li>
</ul>

"Changed"消息只在重新加载页面后出现，而不是在更改视图后出现…请帮忙-谢谢

( ]

我使用_router.onRouteStart。听了。

Answer 1

我现在有一个很好的解决方案:工作示例(编译为JS):
http://samples.mikemitterer.at/example/flexbox/fbangular.html

HTML:

<ul class="nav nav-pills nav-stacked">
    <!-- I'm using data-route here because this Uri is a bit complicated -->
    <!-- Check myRouteInitializer below and you'll know what I mean -->
    <li navbaractivator data-route="first/first"><a href="#/first">Home</a>
        <ul class="nav nav-pills nav-stacked">
            <li navbaractivator><a href="#/first/sub">Submenu</a></li>
        </ul>
    </li>
    <li navbaractivator><a href="#/second">Second</a></li>
    <!-- You can use data-route with route-names separated by / if you want -->
    <li navbaractivator data-route="third"><a href="#/third">Third</a></li>
    <li navbaractivator><a href="flexbox.html" target="_self">JS-Version</a></li>
</ul>

我的装饰:

@Decorator(selector: '[navbaractivator]')
class NavbarActivator {
    final _logger = new Logger('webapp_base_ui.sample.flexbox.navbaractivator');
    static const String _classToChange = "active";
    static const String _dataAttribute = "data-route";
    final Router _router;
    final html.Element _element;
    String _routeToCheck;
    NavbarActivator(this._element, this._router) {
        _logger.fine("NavbarActivator");
        _routeToCheck = _element.getAttribute(_dataAttribute);
        _logger.fine("Route-Name: to check: ${_routeToCheck}");
        _addListener(compareAttribute: (_routeToCheck != null && _routeToCheck.isNotEmpty));
    }
    //--------------------------------------------------------------------------------
    // private
    String _route() {
        final List<String> names = new List();
        _router.activePath.forEach((final Route element) {
            names.add(element.name);
        });
        return names.join("/");
    }
    void _addListener({final bool compareAttribute }) {
        _router.onRouteStart.listen((final RouteStartEvent event) {
            event.completed.then((final bool success) {
                if (success) {
                    final String route = _route();
                    Function check = () => _compareRoutePath();
                    if(!compareAttribute) {
                        check = () => _compareFragment(event.uri);
                    }
                    if(check()) {
                        _element.classes.add(_classToChange);
                    } else {
                        _element.classes.remove(_classToChange);
                    }
                }
            });
        });
    }
    bool _compareRoutePath() {
        final String route = _route();
        _logger.fine("Changed, Route-Name to check: ${_routeToCheck}, Route-Name: $route");
        return (_routeToCheck == route);
    }
    bool _compareFragment(final String uri) {
        _logger.fine("Changed, Uri: ${uri}");
        final html.AnchorElement anchor = (_element.querySelector("a") as html.AnchorElement);
        if (anchor != null && anchor.href != null && anchor.href.indexOf("#") != -1) {
            try {
                final String fragment = anchor.href.substring(anchor.href.indexOf("#") + 1);
                _logger.fine("  -> Fragment: ${fragment}, Route-Name: ${_route()}, Uri: $uri");
                if (fragment == uri) {
                    return true;
                }
            }
            on RangeError
            catch(e) {
                _logger.fine("No fragment in ${anchor.href}");
            }
        }
        return false;
    }
}

下面是路由器:

void myRouteInitializer(Router router, RouteViewFactory view) {
    router.root
        ..addRoute(
            name: "first",
            path: "/first",
            //enter: view("views/first.html"),
            defaultRoute: true,
            mount: (Route route) => route
                ..addRoute(
                    defaultRoute: true,
                    name: 'first',
                    path: '/all',
                    enter: view('views/first.html'))
                ..addRoute(
                    name: 'firstsub',
                    path: '/sub',
                    enter: view('views/firstsub.html'))
        )
        ..addRoute(
            name: "second",
            path: "/second",
            enter: view("views/second.html")
        )
        ..addRoute(
           name: "third",
            path: "/third",
            enter: view("views/third.html")
    );
}