Durandal干扰Knockout绑定？

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

如果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);
    };
};

Answer 2

我没有使用breeze，所以我不知道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);
    });
}