1

デフォルトのデュランダル設定でSPAアプリを構築しています。ajax 呼び出しでデータを返す複数のビューがありますが、完全には機能していません。ここに表示されている従業員のリストを検索できるように、検索ボックスを備えたシェル ページを作成しました。

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 操作を配置することに関する同様の問題について、複数の質問を見てきました。ビューに添付されています。 Javascript が SPA でレンダリングされません Durandal でオブザーバブルを使用するには? HotTowel: ページ間を移動するとビューモデルがマッピングを失う

これらのプラクティスをコードに組み込んだ後も、ビューを正しく更新するのにまだ問題があります。

他に知っておくべきデュランダル/ノックアウトのプロパティはありますか? (router.navigateTo(url);) を使用してビューに移動するたびにバインディングを更新するにはどうすればよいですか。シェル プロパティ (cacheViews: true) を true と false に設定しましたが、何も変わらないようです。

これは、Durandal で SPA アプリを構築する際に私が抱えていた多くの問題の 1 つです。まだあきらめないようにしています。

4

2 に答える 2

1

これを簡単にテストすることはできませんが、観察可能なものを間違って処理していると思います。

「結果」変数は従業員の配列であると思われます。この場合、observableArray ( http://knockoutjs.com/examples/collections.html )でこれを処理できます。

また、self.employees のように値を直接設定することはできません。

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