gpt4 book ai didi

dart - 装饰器(范围)/监视功能未调用

转载 作者:行者123 更新时间:2023-12-03 04:07:01 24 4
gpt4 key购买 nike

这是我的装饰器:

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

“已更改”消息仅在重新加载页面后出现,而在更改 View 后不会出现...
请帮助-thx

[ 更新]

我现在正在使用_router.onRouteStart.listen。在下面的我的答案中有更多详细信息

最佳答案

我现在有一个很好的解决方案:
工作样本(编译为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")
);
}

关于dart - 装饰器(范围)/监视功能未调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23470484/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com