JsObservable設置具有子屬性的屬性

我將如何着手對具有子屬性數據的對象進行可觀察的更新 - 鏈接到表單元素？JsObservable設置具有子屬性的屬性

var app = { 
 
    formData: { 
 
     selectedThing: "thingValue1", 
 
     selectedPlace: "placeValue1" 
 
    } 
 
}; 
 

 

 

 
$("#btnUpdate").on("click", function(){ 
 
    var replacementForm = { 
 
     selectedThing: "thingValue2", 
 
     selectedPlace: "placeValue2" 
 
    } 
 
    $.observable(app).setProperty("formData", replacementForm); 
 
}); 
 

 
$("#content").link(true, app);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://www.jsviews.com/download/jsviews.js"></script> 
 

 
<div id="content"> 
 
    <input data-link="formData.selectedThing trigger=true"/> 
 
    <br/> 
 
    <input data-link="formData.selectedPlace trigger=true"/> 
 
</div> 
 

 
<button id="btnUpdate" type="button">Update</button>

我有一些輸入字段中的數據鏈接到一個對象的屬性，並且當用戶按下按鈕，所有這些字段的需要使用的對象（從所接收的獲取更新。服務器作爲JSON，反序列化爲一個對象相同的形式的元素的基礎的數據對象）這是我的jsfiddle： http://jsfiddle.net/xpe1ds0a/

來源

2015-11-05 Brian Hinckle

回答從https://stackoverflow.com/a/32339038/1054484

「克隆」 10

它不工作的原因是因爲您正在使用「深度路徑」formData.selectedThing - 默認情況下，它僅在葉級別「監聽」可觀察的更改，而不是更深。要選擇加入也聽着formData對象的變化，不只是葉selectedThing屬性，則需要通過^更換.，表示要下來聽聽路徑更深的層次：

<input data-link="formData.selectedThing trigger=true"/> 
<input data-link="formData.selectedPlace trigger=true"/>

查看部分路徑：葉子變化或深度變化在本文檔主題： http://www.jsviews.com/#observe。

另請參閱示例，如示例：帶有普通對象的JsViews和本主題中的數組：http://www.jsviews.com/#explore/objectsorvm。

更新的jsfiddle這裏：http://jsfiddle.net/xpe1ds0a/1/

來源

2015-11-05 02:02:45 BorisMoore

會不會有一個簡單的方法來刪除根對象上用來使這個例子工作時，可觀察到的訂閱「^」創建多餘的「jQuery的＃」財產？我無法將formData發送到服務器，因爲JSON對象突然與數據合同不匹配。 –

JSON.stringify（object）將去除jQuery expando屬性。有關詳情，請參閱https://github.com/BorisMoore/jsviews/issues/71以及https://github.com/BorisMoore/jsviews/issues/239。 – BorisMoore

JsObservable設置具有子屬性的屬性

回答

相關問題