Durandal：Ajax 获取请求显示空白页面而不是我的自定义旋转

Question

问题/不需要的结果：除了显示我编写的“旋转图标”之外，它还会在请求处理时显示一个空白页面，然后在完成后空白页面消失。

目的：我正在尝试将来自服务器的事件列表异步显示为 Json。当它在进行时，我想显示我自定义的旋转图标。

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

Event.html：

     <div class="row">
                <div class="col-lg-11 col-md-11 col-sm-11">
                    <h1>Upcoming events</h1>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1">
                    <span class="icon glyphicon glyphicon-refresh" data-bind="click: refreshEvent"></span>
                </div>

            </div>

    <div class="h-events row">
        <div data-bind="compose: { view: upcoming_event activationData: $root }"></div>
    </div>
    <div class="clearfix"></div>
</div>

Event.js：

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

Answer 1

我可以看到你想要做什么。我不确定是否可以仅切换 compose 绑定的视图部分并期望它更新。您可能需要直接组合到一个 observable，其中包含对您希望在任何时间点显示的所需视图模型的引用。

但是，请先尝试解决此问题。 compose 绑定有错误：

<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>