我遇到了绑定JQuery和Knockout的问题!
我不知道我的问题在哪里!也许你们中的任何人都可以看看fiddle
这是我尝试转到下一个Knockout ViewModel的方式:
masterViewModel.loginVM(null);
masterViewModel.startVM(new StartVM());
这是我的MasterViewModel
var masterViewModel = {
loginVM: ko.observable(),
startVM: ko.observable(),
};
如果没有使用JQuery mobile(绑定到我的ASP.NET MVC4项目),它可以正常工作
这是同一个小提琴,只是没有使用jQuery:[小提琴] http://jsfiddle.net/B2A5f/)
当我在ASP.NET MVC4中尝试此操作时,它无法正常工作!
<form action="" data-bind=" template:{ 'if': loginVM, data: loginVM }">
//SomeCode
</form>
<form action="" data-bind=" template:{ 'if': startVM, data: startVM}">
//Some Code
</form>
<script type="text/javascript">
var masterViewModel = {
loginVM: ko.observable(),
startVM: ko.observable(),
projektUnterbrechen: ko.observable(),
logout : ko.observable(),
projectStartVM: ko.observable()
};
var LoginVM = function () {
var self = this;
self.mandant = ko.observable();
self.user = ko.observable();
self.password = ko.observable();
self.showDetails = function () {
if ((self.user() == "Gregor") && (self.password() == "gregrech")) {
masterViewModel.loginVM(null);
masterViewModel.startVM(new StartVM());
}
else {
alert("Username oder Passwort falsch");
}
};
};
var StartVM = function () {
self = this;
//Um weiterzumachen muss man eingeloggt sein
self.favoriten = ko.observableArray([
{
projectName: "Favorit1"
},
{
projectName: "Favorit2"
},
{
projectName: "Favorit3"
}
]);
//Die zuletzt verwendeten Projekte
self.zuletzt = ko.observableArray([
{
lastProjName: "Zuletzt1"
},
{
lastProjName: "Zuletzt2"
},
{
lastProjName: "Zuletzt3"
}
]);
self.showStart = function (projectName, data, event) {
masterViewModel.projectStartVM(new ProjectStartVM(projectName));
masterViewModel.startVM(null);
};
};
masterViewModel.loginVM(new LoginVM());
$(document).on('pageinit', function () {
ko.applyBindings(masterViewModel);
});
</script>
答案 0 :(得分:0)
而不是绑定:
<form action="" data-bind="template: { 'if': startVM, data: startVM } ">
<form action="" data-bind=" template:{ 'if': loginVM, data: loginVM }">
像这样,试试:
<form action="" data-bind="css: { hidden: startVM==null } ">
<form action="" data-bind="css: { hidden: loginVM ==null } ">
当然隐藏在CSS中的是:
.hidden{ display:none; }
这是用淘汰赛展示一件事或另一件事的现状。
在看到你的第二个小提琴后,我检查了你正在使用的淘汰版本 - 它是1.2.0。所以,我所做的是用2.2.0 http://jsfiddle.net/2Ed98/2/升级你的小提琴,它按预期工作。 Knockout在版本1的兼容性方面存在问题。