具有子属性的 JsObservable 设置属性

Question

我将如何着手对具有子属性数据链接到表单元素的对象进行可观察更新？

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/

Answer 1

从

回答 'cloned'

它不起作用的原因是因为您正在使用 'deep path' formData.selectedThing - 默认情况下 'listens' 仅在叶级而不是更深层次上观察到变化。要选择同时监听 formData 对象的变化，而不仅仅是叶 selectedThing 属性，您需要将 . 替换为 ^ 以指示您想在路径中聆听更深层次的声音：

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

请参阅本文档主题中的路径：叶更改或深度更改部分： http://www.jsviews.com/#observe.

另请参阅本主题中的示例，例如 示例：JsViews with plain objects and array：http://www.jsviews.com/#explore/objectsorvm.

在此处更新了 jsfiddle：http://jsfiddle.net/xpe1ds0a/1/

具有子属性的 JsObservable 设置属性

JsObservable setting Property with Child Properties

javascript

jquery

observable

data-linking

jsviews

具有子属性的 JsObservable 设置 属性

JsObservable setting Property with Child Properties

javascript

jquery

observable

data-linking

jsviews

具有子属性的 JsObservable 设置属性