查看未使用Durandal/Knockout更新SPA中的绑定
View not updating bindings in SPA with Durandal/Knockout
我正在用默认的Durandal设置构建一个SPA应用程序。我有多个视图通过ajax调用返回数据,但是,它并不完美。我创建了一个带有搜索框的shell页面,这样我就可以在这里显示的员工列表中进行搜索。
Shell.js
define(['require', 'durandal/plugins/router', 'durandal/app', 'config'],
function (require, router, app, config) {
var shell = {
router: router,
searchData: searchData,
employees: ko.observable(),
search: search,
activate: activate,
};
var searchData = ko.observable('');
function search(searchData) {
var url = '#/employeeSearch/' + searchData.searchData;
router.navigateTo(url);
}
return shell;
function activate() {
router.map(config.routes);
return router.activate(config.startModule);
}
});
shell.html
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Employees" data-bind="value: searchData" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default" data-bind="click: search">Search</button>
</span>
</div>
用户进行搜索,当他们单击搜索按钮时,下面的视图将导航到employeeSearch页面。这确实有效,并将我需要的数据和视图返回到此处。
define(['require', 'durandal/plugins/router', 'durandal/app', 'config', 'services/logger'],
function(require, router, app, config, logger) {
var goBack = function() {
router.navigateBack();
};
function details(employee) {
var url = '#/employee/' + employee.Id + '/profile';
router.navigateTo(url);
}
var vm = {
goBack: goBack,
employees: ko.observable(),
details: details,
};
return {
activate: function (route) {
var self = this;
return self.getEmployees(route.q);
},
getEmployees: function (query) {
return $.ajax(app.url('/employees?q=' + query),
{
type: "GET",
contentType: 'application/json',
dataType: 'json',
}).then(querySucceeded).promise;
function querySucceeded(result) {
self.employees = result;
logger.log(query + ' Search Activated!', null, 'employeeSearch', true);
}
},
};
});
因此,如果我尝试搜索另一个名称,url将导航,记录器将显示我搜索的值,但视图本身不会显示新结果。在Chrome调试器中,我查看employees对象以包含新的结果集,但视图仍未更新但是,如果我刷新页面,视图确实会正确显示我在这里查看了多个问题,这些问题类似于将数据调用保留在activate方法中,确保数据在完成activate方法之前返回promise,并将DOM操作放在viewAttached中。Javascript未在我的SPA中呈现如何在Durandal中使用可观察性?HotTowel:Viewmodel在页面之间导航时丢失映射
在将这些实践放入我的代码中之后,我仍然在正确更新视图方面遇到问题。
我还需要了解Durandal/Knockout的其他房产吗?如何在每次使用(router.navigationTo(url);)导航到视图时更新绑定。我已经将shell属性(cacheViews:true)设置为true和false,但似乎没有任何变化。
这是我在使用Durandal构建SPA应用程序时遇到的许多问题之一。尽量不要放弃。
我不能这么快测试,但我认为你处理了可观察到的错误。
我怀疑"结果"var是一个雇员数组。在这种情况下,您可以使用observableArray来处理此问题(http://knockoutjs.com/examples/collections.html)
你不能像自营职业者那样直接设定价值您必须调用observable函数来设置类似的值
function querySucceeded(result) {
self.employees(result)
logger.log(query + ' Search Activated!', null, 'employeeSearch', true);
}
在您的样本中,您没有显示/提到敲除的加载位置。如果您使用的是Durandal 2.0,那么在现有的define语句之上的main.js文件顶部添加以下行
define('knocking',ko);
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- 如何将ngrepeat下的ngmodel绑定到$scope
- WinJS内联绑定语法
- 查看未使用Durandal/Knockout更新SPA中的绑定
- 带有淘汰SPA的HTML尝试使用组件,绑定不起作用