Question

这是我的装饰者：

@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-Snippet：

<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>

“更改”消息仅在重新加载页面后出现，但在更改视图后才出现... PLS。帮助 - thx

[更新

我现在正在使用_router.onRouteStart.listen。我在下面的答案中提供了更多细节

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")
    );
}

装饰师（范围）/手表功能没有调用

1 个答案: