我最近的任务是创建一个SPA。所以,我创建了一个新项目并选择了SPA,发现它加载了我需要的所有文件,包括这个knockout.js。
我是knockout.js的新手,所以我看了几个视频,然后我明白了这个想法,但SPA项目似乎并没有为我计算,因为它不是单页应用程序因为你必须去一个新的URL来登录,注册,授权,管理帐户等(你明白了)。
因此,查看索引页面的代码,我可以看到homeView的视图模型。它看起来像这样:
function HomeViewModel(app, dataModel) {
var self = this;
self.myHometown = ko.observable("");
Sammy(function () {
this.get('#home', function () {
// Make a call to the protected Web API by passing in a Bearer Authorization Header
$.ajax({
method: 'get',
url: app.dataModel.userInfoUrl,
contentType: "application/json; charset=utf-8",
headers: {
'Authorization': 'Bearer ' + app.dataModel.getAccessToken()
},
success: function (data) {
self.myHometown('Your Hometown is : ' + data.hometown);
}
});
});
this.get('/', function () { this.app.runRoute('get', '#home') });
});
return self;
}
app.addViewModel({
name: "Home",
bindingMemberName: "home",
factory: HomeViewModel
});
,HTML看起来像这样:
<!-- ko with: home -->
<!-- removed HTML to make it concise -->
<!-- /ko -->
现在,从这个看起来(如果我错了,请纠正我) with 句柄说明如果有一个名为 home 的变量,则显示它(I假设这是bindingMembername的内容。
所以,看到我可以猜到,如果我添加了另一个部分页面并将其包含在内。我可以创建一个这样的视图模型:
function DrawViewModel(app, dataModel) {
var self = this;
Sammy(function () {
this.get('#draw', function () {
app.home = null;
});
});
return self;
}
app.addViewModel({
name: "Draw",
bindingMemberName: "draw",
factory: DrawViewModel
});
所以,理论上因为这会将app.home设置为null,无论何时任何人导航到#draw,那么home部分将不会显示,同样我可以将app.draw = null添加到sammy路径以供homeViewModel隐藏抽奖部分。
我的问题是,我创建的viewModel越多,它就越复杂。那么,有什么我想念的吗?有没有更简单的方法呢?
我的最终目标是将所有页面移动到SPA(包括登录/注册页面)。
提前干杯, / r3plica
答案 0 :(得分:1)
好吧,经过一番乱搞,我发现了如何做到这一点。 基本上我重写了AddView方法并使它看起来像这样:
// Other operations
self.addViewModel = function (options) {
var viewItem = new options.factory(self, dataModel),
navigator;
// Add view to AppViewModel.Views enum (for example, app.Views.Home).
self.Views[options.name] = viewItem;
// Add binding member to AppViewModel (for example, app.home);
self[options.bindingMemberName] = ko.computed(function () {
if (self.view() !== viewItem) {
return null;
}
return new options.factory(self, dataModel);
});
if (typeof (options.navigatorFactory) !== "undefined") {
navigator = options.navigatorFactory(self, dataModel);
} else {
navigator = function () {
self.view(viewItem);
};
}
// Add navigation member to AppViewModel (for example, app.NavigateToHome());
self["navigateTo" + options.name] = navigator;
};
你可以看到,如果检查当前保持的视图是否与我添加的视图不同。如果是,那么我返回null(这是我如何让它隐藏我没有使用的任何视图)。 为了进一步回答我的问题,如果用户没有登录,我需要一种方法来确定如何指向登录页面。
再次在 app.viewmodel.js 中添加了一些可观察的属性:
// UI state
self.user = ko.observable(null);
self.loggedIn = ko.computed(function () {
return self.user() !== null;
});
并在我的新 login.viewmodel.js 中添加了此功能:
// Operations
self.login = function () {
self.loggingIn(true);
dataModel.login({
grant_type: "password",
username: self.userName(),
password: self.password()
}).done(function (data) {
if (data.userName && data.access_token) {
app.navigateToLoggedIn(data.userName, data.access_token, self.rememberMe());
} else {
//self.errors.push("An unknown error occurred.");
}
}).fail(function (jqXHR, textStatus, error) {
dataModel.displayError(jqXHR);
}).always(function () {
self.loggingIn(false);
});
};
这里重要的一点是 app.naviateToLoggedIn 方法。它位于 app.viewmodel.js 中,如下所示:
// UI operations
self.navigateToLoggedIn = function (userName, accessToken, persistent) {
if (accessToken) {
dataModel.setAccessToken(accessToken, persistent)
}
self.user(new UserViewModel(self, userName, dataModel));
self.navigateToHome();
};
userViewModel很简单:
function UserViewModel(app, name, dataModel) {
var self = this;
// Data
self.name = ko.observable(name);
// Operations
self.logOff = function () {
dataModel.logout().done(function () {
app.navigateToLoggedOff();
}).fail(function (jqHXR) {
dataModel.displayError(jqHXR);
});
};
return self;
}
最后,为了让我们的初始加载正确,在 home.viewmodel.js js文件中,我有这个sammy声明:
Sammy(function () {
this.get('#home', function () {
if (app.loggedIn()) {
app.navigateToHome();
} else {
window.location.hash = "login";
}
});
this.get('/', function () { this.app.runRoute('get', '#home') });
});