JQuery和Knockout不能一起工作

JQuery和Knockout不能一起工作,jquery,knockout.js,Jquery,Knockout.js,我对JQuery和Knockout的绑定有问题 我不知道我的问题在哪里!也许你们任何人都可以看看这个 以下是我尝试转到下一个淘汰视图模型的方式: masterViewModel.loginVM(null); masterViewModel.startVM(new StartVM()); 那是我的MasterViewModel var masterViewModel = { loginVM: ko.observable(), start

我对JQuery和Knockout的绑定有问题

我不知道我的问题在哪里!也许你们任何人都可以看看这个

以下是我尝试转到下一个淘汰视图模型的方式:

  masterViewModel.loginVM(null);
  masterViewModel.startVM(new StartVM());
那是我的MasterViewModel

 var masterViewModel = {

            loginVM: ko.observable(),
            startVM: ko.observable(),
        };
如果不使用JQuery mobile(绑定到我的ASP.NET MVC4项目中),它可以正常工作

这里是相同的提琴,只是没有使用jQuery:[fiddle])

当我在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>

//一些代码
//一些代码
var主视图模型={
loginVM:ko.observable(),
startVM:ko.可观测(),
projektUnterbrechen:ko.observable(),
注销:ko.observable(),
projectStartVM:ko.observable()
};
var LoginVM=函数(){
var self=这个;
self.mandant=ko.observable();
self.user=ko.observable();
self.password=ko.observable();
self.showDetails=函数(){
如果((self.user()=“Gregor”)&&(self.password()=“grech”)){
masterViewModel.loginVM(空);
masterViewModel.startVM(新的startVM());
}
否则{
警报(“用户名或密码错误”);
}
};
};
var StartVM=函数(){
self=这个;
//嗯,我是说,我是说
self.favoriten=ko.array([
{
项目名称:“Favorit1”
},
{
项目名称:“Favorit2”
},
{
项目名称:“Favorit3”
}
]);
//项目进展情况
self.zuletzt=ko.array([
{
最后项目名称:“Zuletzt1”
},
{
最后项目名称:“Zuletzt2”
},
{
最后项目名称:“Zuletzt3”
}
]);
self.showStart=函数(项目名称、数据、事件){
masterViewModel.projectStartVM(新项目StartVM(项目名称));
masterViewModel.startVM(空);
};
};
masterViewModel.loginVM(新loginVM());
$(文档).on('pageinit',函数(){
ko.应用绑定(masterViewModel);
});
代替绑定:

<form action="" data-bind="template: { 'if': startVM, data: startVM } ">

<form action="" data-bind=" template:{ 'if': loginVM, data: loginVM }"> 
这是用击倒来表现一件事或另一件事的现状方式


看到你的第二把小提琴后,我检查了你正在使用的击倒版本——它是1.2.0。所以,我所做的是升级你的小提琴与2.2.0和它的工作预期。Knockout在版本1的兼容性方面存在问题。

您的JSFIDLE不起作用:)我在问题中添加了第二个JSFIDLE,以便您了解我的意思;)它不仅应该隐藏,而且应该加载新的。。但是谢谢你!我将在我的fiddlewell中尝试这一点,基本上你通过将值设置为可观察值来控制你在其他地方加载的内容,但基本上如果值不为null,你就显示它,否则就不显示。或者也许我误解了你,所以请补充更多细节:)我就是这么做的!但是隐藏不是问题。。我的问题是,如果没有JQuery,一切都可以正常工作。也许我没有正确地绑定淘汰赛,但我不知道我做错了什么,我在我的问题上添加了第二个副手。看了这篇文章之后,也许你理解了我的意思。我已经更新了答案:)检查JSFIDDLE中的托管资源选项卡谢谢!我尝试在我的mvc应用程序中使用它。绑定看起来像messagebox出现时一样工作,但是“StartVM”没有加载。你知道这一个有什么问题吗?;)
<form action="" data-bind="css: { hidden: startVM==null } ">

<form action="" data-bind="css: { hidden: loginVM ==null } "> 
.hidden{ display:none; }