在同一屏幕上與兩個視圖模型的淘汰

我正嘗試在同一頁面上創建登錄表單和註冊表單。所以要做到這一點，我需要兩個視圖模型。我創建它們如下。在同一屏幕上與兩個視圖模型的淘汰

在我的網頁，我有兩個單獨的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

在同一屏幕上與兩個視圖模型的淘汰

回答

相關問題