JsObservable setting Property with Child Properties

Question

How would I go about making an observable update to an object with child properties data-linked to form elements?

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>

I have some input fields data-linked to properties of an object, and when the user presses a button, all of those fields need to get updated using an object (received from the server as JSON, deserialized into an object identical to the data object underlying the form elements.) Here is my jsfiddle: http://jsfiddle.net/xpe1ds0a/

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

Answer 'cloned' from https://stackoverflow.com/a/32339038/1054484

The reason it is not working is because you are using a 'deep path' formData.selectedThing - which by default 'listens' to observable changes only at the leaf level, not deeper. To opt in to listening also to changes in the formData object, not just the leaf selectedThing property, you need to replace the . by ^ to indicate that you want to listen down to a deeper level in the path:

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

See the section Paths: leaf changes or deep changes in this documentation topic: http://www.jsviews.com/#observe.

See also the examples such as Example: JsViews with plain objects and array in this topic: http://www.jsviews.com/#explore/objectsorvm.

Updated jsfiddle here: http://jsfiddle.net/xpe1ds0a/1/

edited May 23 '17 at 12:00

Community

1
1

answered Nov 05 '15 at 02:02

BorisMoore

8,444
1
16
27

Would there be an easy way to remove the extraneous "jQuery#" property that the observable subscription "^" creates when used on the root object to make this example work? I'm unable to send formData to the server because the JSON object suddenly doesn't match the datacontract. – Brian Hinckle Nov 10 '15 at 02:16
JSON.stringify(object) will strip the jQuery expando properties. See https://github.com/BorisMoore/jsviews/issues/71, and also https://github.com/BorisMoore/jsviews/issues/239, for some details. – BorisMoore Nov 10 '15 at 17:58

JsObservable setting Property with Child Properties

1 Answers1