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