1

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

});

外壳.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 调试器中探索，我查看了包含新结果集的员工对象，但该视图仍未更新。但是，如果我刷新页面，视图确实会正确显示我在这里查看了多个问题，这些问题与将数据调用保持在激活方法中的类似问题，确保数据在完成激活方法之前返回承诺，并进行 DOM 操作在视图中附加。 Javascript 未在我的 SPA 中呈现 如何在 Durandal 中使用 observables？ HotTowel：在页面之间导航时 Viewmodel 丢失映射

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

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

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

4

2 回答 2

1

我不能快速测试这个，但我认为你处理了可观察到的错误。

我怀疑“结果”变量是一组员工。在这种情况下，您可以使用 observableArray ( http://knockoutjs.com/examples/collections.html )来处理它

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

 function querySucceeded(result) {
                self.employees(result) 
                logger.log(query + ' Search Activated!', null, 'employeeSearch', true);
            }
于 2013-08-28T16:37:55.860 回答
0

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

定义（'淘汰赛'，ko）；

于 2013-10-17T04:50:21.990 回答