查看未使用Durandal/Knockout更新SPA中的绑定

View not updating bindings in SPA with Durandal/Knockout

本文关键字:SPA 绑定 更新 Knockout 未使用 Durandal      更新时间:2023-09-26

我正在用默认的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);