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/


javascript observable jquery data-linking jsviews
person Brian Hinckle    schedule 05.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ответ «клонирован» из https://stackoverflow.com/a/32339038/1054484

Причина, по которой он не работает, заключается в том, что вы используете «глубокий путь» 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/

person BorisMoore    schedule 05.11.2015
comment
Есть ли простой способ удалить лишнее свойство jQuery#, которое наблюдаемая подписка ^ создает при использовании в корневом объекте, чтобы этот пример работал? Я не могу отправить formData на сервер, потому что объект JSON внезапно не соответствует контракту данных. - person Brian Hinckle; 10.11.2015
comment
JSON.stringify(object) удалит свойства расширения jQuery. См. github.com/BorisMoore/jsviews/issues/71, а также github.com/BorisMoore/jsviews/issues/239, чтобы узнать некоторые подробности. - person BorisMoore; 10.11.2015