Durandal 干扰 Knockout Bindings？

Question

我正在构建一个使用 Durandal 和 Knockout 的应用程序，当我使用 durandal 导航到我的 SPA 中的某个页面时似乎出现了问题。当我从主屏幕加载应用程序并导航到具有一系列级联下拉列表的第二个页面时，它看起来好像绑定中断了。如果我刷新页面并加载第二页以开始绑定所有似乎都按预期工作。第一页现在除了标题之外什么都没有，第二页有级联下拉菜单。老实说，我不确定在这个问题上要包含什么代码，所以如果有什么人们想看到的，请随时提问。我正在使用“Knockout Context”Chrome 插件查看 Knockout 上下文，除了未显示结果外，一切似乎都在工作。

有问题的更简单的视图模型

define(['services/logger',
    "services/datacontext"],
function (logger, datacontext) {
    var manufacturers = ko.observableArray();
    var manufacturer = ko.observable();
    var isSaving = ko.observable(false);
    var modelsWithSizes = ko.observableArray();

    manufacturer.subscribe(function (newValue) {
        datacontext.getBikeModelsWithSizes(modelsWithSizes, newValue.manufacturerID());
    });


    var hasChanges = ko.computed(function () {
        return datacontext.hasChanges();
    });

    var cancel = function () {
        datacontext.cancelChanges();
    };

    var canSave = ko.computed(function () {
        return hasChanges() && !isSaving();
    });

    var save = function () {
        isSaving(true);
        return datacontext.saveChanges().fin(complete);

        function complete() {
            isSaving(false);
        }
    };

    var canDeactivate = function () {
        if (hasChanges()) {
            var title = 'Do you want to leave ?';
            var msg = 'Navigate away and cancel your changes?';
            var checkAnswer = function (selectedOption) {
                if (selectedOption === 'Yes') {
                    cancel();
                }
                return selectedOption;
            };
            return app.showMessage(title, msg, ['Yes', 'No'])
                .then(checkAnswer);

        }
        return true;
    };

    var vm = {
        activate: activate,
        cancel: cancel,
        canDeactivate: canDeactivate,
        canSave: canSave,
        hasChanges: hasChanges,
        manu: manufacturer,
        manufacturers: manufacturers,
        modelsWithSizes: modelsWithSizes,
        save: save
    };

    return vm;

    //#region Internal Methods
    function activate() {
        manufacturers(datacontext.lookups.manufacturers),
        logger.log('Frames View Activated', null, 'frames', false);
        return true;
    }


    //#endregion
});

datacontext调用如下

datacontext.lookups = {
    manufacturers: function ()
    { return getLocal('Manufacturers', 'name', true); }
};

Answer 1

我没有使用微风，所以我不知道getLocal() 是否是异步的，但如果有疑问，请返回一个包装好的$.when(syncOrAsync).then(...)。

function activate() {
    var manufacturesPromise = datacontext.lookups.manufacturers();
    logger.log('Frames View Activated', null, 'frames', false);

    return $.when(manufacturesPromise).then(function(results){
       manufacturers(results);
    });
}

Answer 2

如果 datacontext.lookups.manufacturers 是一个预加载的 observableArray，您可能需要将您的激活函数更改为：

function activate() {
    vm.manufacturers(datacontext.lookups.manufacturers());
    logger.log('Frames View Activated', null, 'frames', false);
    return true;
};

如果 datacontext.lookups.manufacturers 是对 web api 的异步调用，您需要将其更改为：

function activate() {
    logger.log('Frames View Activated', null, 'frames', false);
    return datacontext.lookups.manufacturers().then(querySuccess);

    function querySuccess(data)
    {
        vm.manufacturers(data.results);
    };
};