Question

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

那么，如果我尝试搜索另一个名称，该网址将导航，记录器将显示我搜索的值，但视图本身不会显示新结果。在Chrome调试器中进行探索，我查看employees对象以包含新结果集，但视图仍未更新。 如果我刷新页面，那么视图会正确显示我在这里查看了多个问题，关于在activate方法中保留数据调用的类似问题，请确保数据在完成之前返回一个承诺激活方法，并将DOM操作放在viewAttached中。 Javascript is not rendering in my SPA How to use observables in Durandal? HotTowel: Viewmodel lose mapping when navigating between pages

将这些做法放入我的代码后，我仍然无法正确更新视图。

我需要注意其他任何Durandal / Knockout属性吗？每次使用（router.navigateTo（url）;）导航到视图时，如何才能更新绑定。我已将我的shell属性（cacheViews：true）设置为true和false但似乎没有任何更改。

这是我在使用Durandal构建SPA应用程序时遇到的众多问题之一。尽量不要放弃。

Answer 1

我无法快速测试，但认为你处理了可观察到的错误。

我怀疑＆＃34;结果＆＃34; var是一组员工。在这种情况下，您可以使用observableArray（http://knockoutjs.com/examples/collections.html）

来处理此问题

你不能像self.employees一样直接设置值您必须调用observable函数来设置值

 function querySucceeded(result) {
                self.employees(result) 
                logger.log(query + ' Search Activated!', null, 'employeeSearch', true);
            }

Answer 2

在您的样本中，您没有显示/提及装载挖空的位置。如果您使用的是Durandal 2.0，则将以下行添加到现有define语句上方main.js文件的顶部

define（'knockout'，ko）;

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

2 个答案: