JQuery和Knockout不能一起工作

Question

我遇到了JQuery和Knockout綁定的問題！

我不知道我的問題在哪裏！也許有人對你可以採取這種fiddle

一看這是我嘗試去到下一個淘汰賽視圖模型：

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> 

Answer 1

取而代之的結合：

<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/升級你的小提琴，它按預期工作。淘汰賽曾與各地版本的兼容性問題1.