如何實現視模型屬性有條件的部分視圖？

Question

我有功能需求，如下面的例子：

• 的「公民」包含3個單選按鈕，分別是「南非公民」，「非南非，有工作證」和「非 南非，沒有工作許可證「。
• 的「工作許可號」是一個免費的文本字段，限15個字符，在一個的事件被激活「非南非，
  與工作許可證」評選中的「公民」領域

我想建立某種形式的現場編輯器，如「就業證號碼」，使或基於其他模特屬性，如在這種情況下，‘公民’禁用它們所包含的編輯一般的容器。這是很容易實現當第一次檢索並渲染視圖模型時

但是，事情變得複雜，當用戶例如改變「公民」的價值。只有UI場發生了變化，沒有模型屬性，但如果「就業證號碼」啓用了決定容器，依賴於模型屬性

我看到的只有兩個解決辦法：

1. 使用客戶端（JavaScript也許）視圖模型，從服務器端視圖模型構建，可能是Knockout.js場景，然後繞過正常的表單提交，並同時提交整個客戶端模式。

2. 使用ajax在用戶更改「Citizenship」值時更新服務器端模型，並更新所有視圖部分取決於「公民身份」的價值。這使事情變得複雜，因爲我必須有一個'工作'和'承諾'的模型服務器端。這種工作模式只保留小的變化，例如「公民身份」，然後當用戶單擊保存時，將所有更改移動到「已提交」模式並保留到數據存儲區。

對於那些理解我的意思，我可以使用其他方法來實現這一點，或者我該如何改進上面概述的技術？

Answer 1

我認爲這種情況是非常適合採用淘汰賽客戶端解決方案，正如你在第一次提出的解決方案中提到。 Knockout使得以聲明方式進行這種客戶端UI操作變得非常簡單。用戶完成表單後，只需將客戶端視圖模型對象序列化爲JSON並將其發佈到服務層。

您的第二個建議的解決方案不太引人注目。在它的缺點是：

1. 它需要一個服務器回發只是爲了更新UI，這是一個不太理想的用戶體驗
2. 你的服務器的域模型現在必須有一個工作和堅定的模式，這更增加了複雜性

用於與敲除和客戶端側使用MVVM模式的javascript視圖模型實現此的碼是相當簡單：

<div data-bind = "text: name"></div> 
<input type="radio" name="citizenship" value="yes" data-bind="checked: citizenship">South African Citizen<br/> 
<input type="radio" name="citizenship" value="nowithoutworkpermit" data-bind="checked: citizenship">Non South African, no work permit<br /> 
<input type="radio" name="citizenship" value="nowithworkpermit" data-bind="checked:  citizenship">Non South African, with work permit<br /> 
<div id="workpermit" data-bind="visible: citizenship() === 'nowithworkpermit'"> 
    <input type="text" name="workpermitinumber" />Work Permit number 
</div> 

<script src="/Scripts/knockout-2.2.0.js" ></script> 
<script> 
    var MyApp = MyApp || {}; 
    MyApp.ViewModel = { 
     citizenship: ko.observable(""), 
     name: ko.observable("John") 
    }; 
    ko.applyBindings(MyApp.ViewModel); 
</script> 

在這個例子中，我在MyApp.ViewModel中創建了一個視圖模型。該模型有兩個屬性：名稱和公民身份。我已經將「公民身份」屬性數據綁定到無線電對講機的「已檢查」屬性，並且也顯示了顯示工作許可證編號的文本框的「可見」屬性。

當用戶檢查單選按鈕時，淘汰賽將更新視圖模型的「公民身份」屬性。視圖模型屬性中的這種更改反過來會通過敲除「visibile」綁定來更新workpermit div的可見性css屬性。當用戶準備好提交表單時，只需將MyApp.ViewModel序列化爲JSON並通過網絡發送。

淘汰賽的文檔非常出色（see here），我認爲這將是您嘗試完成的最佳選擇。