Durandal路由不工作-我错过了一个配置设置
Durandal Routing not working--am I missing a configuration setting?
我试图得到一个Durandal应用程序设置,我开始与一个非常简单的配置只有两个视图。
发生的是,当我调用router.navigateTo('#/welcome')或router.navigateTo('#/primaryapplications ')时,视图没有改变。但是,地址栏中的URL发生了变化,如果我重新加载页面,我将获得我试图导航到的视图。
我做错了什么?
这里有一个视频展示了我所经历的行为。我在视频中引用的代码包含在下面。
main.js
require.config({
paths: { "text": "durandal/amd/text" }
});
define(function (require) {
var system = require('durandal/system'),
app = require('durandal/app'),
router = require('durandal/plugins/router'),
viewLocator = require('durandal/viewLocator'),
logger = require('services/logger');
system.debug(true);
app.start().then(function () {
// route will use conventions for modules
// assuming viewmodels/views folder structure
router.useConvention();
// When finding a module, replace the viewmodel string
// with view to find it partner view.
// [viewmodel]s/sessions --> [view]s/sessions.html
// Otherwise you can pass paths for modules, views, partials
// Defaults to viewmodels/views/views.
viewLocator.useConvention();
// Will assume that a URL to #/something corresponds to a viewmodels/something viewmodel.
// http://durandaljs.com/documentation/Router/)
//router.mapAuto();
var routes = [{
url: 'welcome',
moduleId: 'viewmodels/welcome',
name: 'Welcome',
visible: true
}, {
url: 'primaryapplicants',
moduleId: 'viewmodels/primaryapplicants',
name: 'Primary Applicants',
visible: true
}];
router.map(routes);
app.setRoot('viewmodels/shell');
// override bad route behavior to write to
// console log and show error toast.
// This method also accepts a "params" parameters, but we're not using it,
// and to avoid JSLint warnings, we're not including it.
router.handleInvalidRoute = function (route) {
logger.logError('No route found', route, 'main', true);
};
});
});
shell.html
<div>
Shell HTML
<ul id="navbar">
<li><a href="#/welcome">Welcome</a></li>
<li><a href="#/primaryapplicants">Primary Applicants</a></li>
</ul>
<!--ko compose: {model: router.activeItem} -->
<!--/ko-->
</div>
shell.js
define(['durandal/system', 'services/logger', 'durandal/plugins/router'],
function (system, logger, router) {
function activate() {
// Listen for click events so we can navigate
$('body').on('click', '#navbar a', function (event) {
var navTo = '#/welcome';
navTo = event.target.hash;
logger.log('Attempting navigation to ' + navTo,
null,
system.getModuleId(shell),//ignore jslint
true);
router.navigateTo(navTo);
//alert("About to navigate to " + event.target.hash);
//router.navigateTo(event.target.hash);
});
logger.log('Shell loaded',
null,
system.getModuleId(shell),//ignore jslint
true);
return router.activate('welcome');
}
var shell = {
activate: activate,
router: router
};
return shell;
}
);
通常情况下,一旦你找到了解决方案,它真的很简单。
显然,在compose绑定(Durandal提供的自定义Knockout绑定)中,必须有一个afterCompose绑定。换句话说,就是: <!--ko compose: {model: router.activeItem} -->
<!--/ko-->
需要修改为:
<!--ko compose: {model: router.activeItem, afterCompose: router.afterCompose} -->
<!--/ko-->
没有它,我的导航就无法工作。这在文档中已经说得很清楚了,但我还是没有注意到:
必须将模型和afterCompose回调连接到
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 在数组中的一个元素上设置多个值
- 如何将Date字段设置为等于另一个Date+Int值,该值表示月份值
- 如何从onclick函数设置全局变量并将其传递给另一个JS文件
- 一个页面上有多个Ace编辑器,没有预先设置元素
- 可以't将sessionStorage设置为Javascript中的一个变量
- 为两个ID设置一个变量的正确语法
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- 是一个javascript bookmarklet,可以设置破坏跨域安全的域cookie
- 当张贴到数据库时,I'我得到了一个“;可以't在它们被发送错误之后设置报头”;
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 使用 JavaScript 一次为一个元素设置多个属性
- 为位于路线上的谷歌地图标记(起点和终点)设置一个信息窗口
- JQuery在设置另一个值之前将附加值设置为null
- 从另一个设置引导日期时间选择器的 minDate
- jQuery插件开发执行一个设置,这是一个函数
- 读取一个设置文件并在node.js中计算
- 保持重新加载页面,直到一个设置文本出现(对于greasekit)
- 我可以在Uploadifive中添加一个设置,让图片按顺序上传吗?
- 将字符的颜色从一个设置为另一个