Durandal:Ajax获取请求显示空白页面,而不是我的自定义页面 问题/不想要的结果:除了显示我的合成“旋转图标”之外,它还在请求过程中显示空白页,然后在完成后空白页消失。

Durandal:Ajax获取请求显示空白页面,而不是我的自定义页面 问题/不想要的结果:除了显示我的合成“旋转图标”之外,它还在请求过程中显示空白页,然后在完成后空白页消失。,ajax,knockout.js,durandal,Ajax,Knockout.js,Durandal,目的:我试图以Json的形式异步显示来自服务器的事件列表。进行时,我希望显示自定义的旋转图标 如何操作:我有event.hmtl和event.js。我使用“durandal compose”来编写“来自服务器的事件列表视图”或“旋转图标”。 1-当我点击刷新按钮时,它将调用“refreshEvent”函数,在处理过程中合成“旋转图标”。 2-refreshEvent将对服务器进行ajax调用以获取事件列表。 3-完成后,我将结果绑定到可观察数据,并编写“事件列表视图” Event.html: d

目的:我试图以Json的形式异步显示来自服务器的事件列表。进行时,我希望显示自定义的旋转图标

如何操作:我有event.hmtl和event.js。我使用“durandal compose”来编写“来自服务器的事件列表视图”或“旋转图标”。 1-当我点击刷新按钮时,它将调用“refreshEvent”函数,在处理过程中合成“旋转图标”。 2-refreshEvent将对服务器进行ajax调用以获取事件列表。 3-完成后,我将结果绑定到可观察数据,并编写“事件列表视图”

Event.html:

define('services/logger', 'durandal/system', 'durandal/activator', 'plugins/router', 'durandal/app', 'services/errorhandler', 'jquery'],
    function (logger, system, activator, router, app, errorhandler, $) {


        var view = {
            progress: 'partials/_progress.html',
            upcoming_event: 'partials/_upcoming-event.html',
        };

    var vm = {
        activate: activate,
        events: ko.observable(),
        upcoming_event: ko.observable(view.progress),
        feed_view: ko.observable(view.progress),
        refreshEvent: refreshEvent,
        even_detail : 
            {
                description: ko.observable(),
                title: ko.observable(),
                date: ko.observable(),
                month: ko.observable(),
                time: ko.observable(),
                name: ko.observable().extend({
                    required: { message: 'Name is required' },
                    minLength: { message: 'Name must be at least 3 characters', params: 3 }

                }),
                team_name: ko.observable().extend({
                    required: { message: 'Team name is required' },
                    minLength: { message: 'Team name must be at least 3 characters', params: 3 }

                }),
                email: ko.observable().extend(
                    {
                        required: { message: 'Email is required' },
                        email: { message: 'Email must be in correct format e.g. example@domain.com' }
                    }),
                phone: ko.observable().extend({
                    required: { message: 'Phone number is required' },
                    number: { message: 'Phone must be number and no spaces' },
                    minLength: { message: 'Phone number must be at least 9 digits', params: 9 }

                }),
                message: ko.observable(),
                event_id: "",
                event_detail_view: ko.observable(),
                old_event_view : "",

            }
    };

    vm.errors = ko.validation.group(vm, { deep: true, observable: false, live: false });


    function refreshEvent() {
        vm.upcoming_event(view.progress); //display spinning icon

        Q.when($.ajax({
                url: '/breeze/feed/FeedAndEvent',
                type: 'GET',
                contentType: 'application/json',
                dataType: 'json'

            })).then(function (result) {

            vm.upcoming_event(result); //display
            vm.upcoming_event(view.upcoming_event);

        }).fail(errorhandler);

    }

    function activate() {

    }

    return vm;
});


我知道你想做什么。我不确定是否可以只切换组合绑定的视图部分,并期望它更新。您可能需要直接合成一个可观察对象,该对象包含对希望在任何时间点显示的所需viewmodel的引用

但是,请先尝试修复此问题。组合绑定中存在错误:

<div data-bind="compose: { view: upcoming_event activationData: $root }"></div>

<!-- Should have a comma after upcoming_event -->
<div data-bind="compose: { view: upcoming_event, activationData: $root }"></div>

您是否查看并了解了HotTower示例是如何设置的?主razor视图以部分视图的形式提供微调器页面,然后在下载后被durandal视图替换。
<div data-bind="compose: { view: upcoming_event activationData: $root }"></div>

<!-- Should have a comma after upcoming_event -->
<div data-bind="compose: { view: upcoming_event, activationData: $root }"></div>