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… ): 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! Można go zastąpić w takim wypadku setterem dla własności w obiekcie, a to de facto działa wszędzie.

[jutro]

Angular chyba faktycznie odpada przy takim małym projekcie

W ostatnim zdaniu miałeś na myśli coś w tym stylu?

[PHP] pobierz, plaintext 
var data = {
	"value1": 2,
	"value2": 6
};
 
function setValue(name, value) {
	data[name] += 1;
	$("#"+name).text(data[name]);
};
 
$("button1").click(function(){
	setValue("value1", 1);
});
[PHP] pobierz, plaintext 

[Comandeer]

Nie, raczej coś takiego: http://jsfiddle.net/Comandeer/2088qcdw/ → settery i gettery to "nowości" z ES5

Co do Angulara - nie mówiłem, żeby jego użyć (człowieku, jestem największym jego hejterem po tej stronie Wisły ). Raczej mówiłem o użyciu 2-way databinding.

[ctom]

a w Vuejs możesz zrobić to tak:

[HTML] pobierz, plaintext 
<div id="app">
    <div v-on="click: up1">{{ value1 }}</div>
</div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
new Vue({
    	el: '#app',
        data: {
         	value1: 10  
        },
        methods: {
         	up1: function(){
             	this.value1++;   
            }
        }
    });
[JAVASCRIPT] pobierz, plaintext 

[Comandeer]

Jedno mnie w tym rozwiązaniu irytuje: po co to [v-on] skoro o wiele przejrzyściej byłoby to zrobić jako część konstruktora Vue?

[jutro]

@ctom wolałbym nie używać żadnych bibliotek.
@comandeer właśnie o to mi chodziło! To już enty raz jak ratujesz mnie przed żmudnym przepytywaniem googla bo "nie wiem jak to się nazywa". Dzięki