【问题标题】:Multiple ViewModels in Knockout observablesKnockout observables 中的多个 ViewModel
【发布时间】:2012-12-12 16:05:36
【问题描述】:

我在 Knockout.js 中遇到了多个 ViewModel 的问题。 绑定有效,但是当出现应该显示用户可观察文本的消息框时,它总是写“未定义”。

有人知道我的问题是什么吗?

<!-- ko template: { 'if': loginVM, data: loginVM } -->
    <h3>This is the login</h3>

    User <input type="value: user" type="text"><br/>
    Password <input type="value: password" type="text"><br/>
    <button data-bind="click: showDetails">Show Details</button>
<!-- /ko -->

<!-- ko template: { 'if': detailsVM, data: detailsVM } -->
    <h1>These are the details</h1>
    <button data-bind="click: showLogin">Show Login</button>
<!-- /ko -->

    var masterViewModel = {
        loginVM: ko.observable(),
        detailsVM: ko.observable()
    };

    var LoginVM = function () {
        this.user=ko.observable();
        this.password= ko.observable();
        this.showDetails = function () {
            alert(this.user());
            if(this.user() == "Gregor")
            {
                 masterViewModel.loginVM(null);
                 masterViewModel.detailsVM(new DetailsVM());
            }

        };
    };

    var DetailsVM = function () {
        this.showLogin = function () {
            masterViewModel.loginVM(new LoginVM());
            masterViewModel.detailsVM(null);
        };
    };

    masterViewModel.loginVM(new LoginVM()); 

    ko.applyBindings(masterViewModel);​

这里还有一个 js.fiddle: http://jsfiddle.net/4A87x/1/

【问题讨论】:

    标签: knockout.js


    【解决方案1】:

    您在绑定中有错字。应该是:

    User <input data-bind="value: user" type="text"><br/>
    Password <input data-bind="value: password" type="text"><br/>
    

    工作小提琴:

    http://jsfiddle.net/4A87x/3/

    【讨论】:

    • 这里还有一个更好的绑定,因为无论如何你都使用内联模板jsfiddle.net/4A87x/6
    • 我现在面临另一个小问题!如果我单击 DetailsVM 中的 showStart 按钮,我必须单击两次才能隐藏 DetialsVM! jsfiddle.net/4A87x/9
    • @Greg:我重构了你的代码。对我来说,这种方式似乎更好。它有效。希望对您有所帮助:jsfiddle.net/4A87x/13
    • 谢谢!我认为这对您来说可能看起来很奇怪,但是如果我在 ASP.NET MVC4 中使用它们,这些小提琴将无法正常工作“” semms只做评论!怎样做才能完成这项工作?
    • @Greg 我不确定,我从未使用过该技术,但您可以尝试使用虚拟 div 而不是 cmets:
      内容
      。不幸的是,你不能将 if 和 with 放在同一个元素上。
    猜你喜欢
    • 2012-09-25
    • 2014-08-28
    • 2013-01-10
    • 1970-01-01
    • 2016-01-01
    • 2014-05-10
    • 2014-05-01
    • 2012-06-03
    • 1970-01-01
    相关资源
    最近更新 更多