Aktualizacja danych w zmiennej i elemencie DOM Opcje

[jutro]

Witam

Chciałbym stworzyć prostą grę IDLE w javascripcie mam takie pytanie. Dane całej gry przechowuję w zmiennej, przykład:

[PHP] pobierz, plaintext 
var data = {
    "value1": 4
};
[PHP] pobierz, plaintext 

W htmlu mam takie małe okienko wyświetlające tę wartość np.

[PHP] pobierz, plaintext 
<span id="value1">4</span>
[PHP] pobierz, plaintext 

Chciałbym aby po kliknięciu w button aktualizowała się wartość jednocześnie w zmiennej i elemencie. Czy coś takiego:

[PHP] pobierz, plaintext 
$("value1").click(function() {
    data.value1 += 1;
    $("value1").text(data.value1);
});
[PHP] pobierz, plaintext 

Pytanie czy to rozwiązanie jest poprawne czy może stosuje się inne metody? Dodam że elementów klikalnych będzie dość sporo.

Ten post edytował jutro 4.09.2015, 17:42:41

[Comandeer]

Jest jeszcze coś, co nazywa się 2-way databinding, a co w JS de facto spopularyzował Angular.js (jedna z niewielu rzeczy, która im się udała… (IMG:style_emoticons/default/wink.gif) ): http://bzdety.comandeer.pl/binding/ → ale to już może być armata na muchę.

Chociaż zastosowanie Object.observe sprawiłaby, że mógłbyś se napisać prostą funkcję, dzięki której każda zmiana w obiekcie powodowałaby zmianą zawartości elementu HTML o [id] takim, jak nazwa własności obserwowanego obiektu. Z tym, że w chwili obecnej AFAIR Object.observe działa tylko w Chrome.

ALE! (IMG:style_emoticons/default/wink.gif) Można go zastąpić w takim wypadku setterem dla własności w obiekcie, a to de facto działa wszędzie.