在同一屏幕上与两个视图模型的淘汰

我正尝试在同一页面上创建登录表单和注册表单。所以要做到这一点，我需要两个视图模型。我创建它们如下。在同一屏幕上与两个视图模型的淘汰

在我的网页，我有两个单独的div，名为“登录形式”和“注册表单”。

我想每个视图模型应用到各自的DIV。

注意，我绑定具有相同名称的几个领域，因为数据是从MVC模式来源。

@Html.TextBoxFor(x => x.EmailAddress, new { @class = "form-control", @placeholder = "Your Email Address", @type = "email", data_bind = "value: EmailAddress" })

该行出现在两个DIV中，但每个div都有一个分配的视图模型（或者我相信）。

然而，当我更新登录形式的电子邮件文本的电子邮件地址，该值被分配到登录表单文本框为好。所以这两个控件都是以某种方式绑定的。

当我编辑在寄存器形式的电子邮件地址，不过，它并没有在登录形式更新。所以它似乎是单向的。

我在做什么？我如何将两个独立的div绑定到他们正确的视图模型？

来源

2016-11-16 Craig

第二个参数ko.applyBindings必须是你要绑定到实际的DOM节点。目前你正试图绑定到一个jQuery选择器，这将无法正常工作。

从documentation：

可选地，可以通过第二个参数来定义要搜索的数据绑定的属性文件的哪部分。例如，ko.applyBindings（myViewModel，document.getElementById（'someElementId'））。这将激活限制为具有ID someElementId及其后代的元素，如果您想拥有多个视图模型并将每个模型与页面的不同区域相关联，这将非常有用。

为了得到这个工作，无论是你的选择更改为香草JS一个，或从jQuery选择使用实际的DOM元素：

ko.applyBindings(loginViewModel, document.getElementById('login-form')); 
ko.applyBindings(registerViewModel, $("#register-form")[0]);

来源

2016-11-16 02:21:04 Steve

您可以使用ko.applyBindings第二个参数。第二个参数告诉knockout在哪里绑定你的viewModel。检查它here欲知更多信息。

的第一个参数表示要与使用它激活

可选的声明绑定什么视图模型对象，你可以通过第二个参数来定义要搜索的其中部分文件数据绑定属性。例如， ko.applyBindings（myViewModel， document.getElementById（'someElementId'））。这限制了激活与ID someElementId及其后代，如果你想有多个视图模型和准每个页面的不同区域，这是有用的元素。

所以在这种情况下，您将有2个applyBindings调用。

另一种方法是将两个viewModel都包含到更高视图模型中。像：

var mainViewModel = function(){ 
    this.loginModel = new loginViewModel(); 
    this.registerModel = new registerViewModel(); 
}

然后你可以只使用with为每个特定divs结合访问loginModel和registerModel。

来源

2016-11-16 02:22:02 Adrian

我已经试图使用第二个参数：ko.applyBindings（registerViewModel，$（“＃register-form”））; - 但它没有工作。我可以尝试你的第二个想法。 – Craig

呵呵，当你调用ko.applyBindings时，'＃register-form'仍然不可用。 – Adrian

在同一屏幕上与两个视图模型的淘汰

回答

相关问题