Angularjs vai Backbonejs vai ko citu?

[daGrevis]

> Kaut kā nepielec, baigā atšķīrība no prasta JQuery.

 

Iesākumam, tu nerunā ar DOM.

[briedis]

Otrkārt, nav jāčakarējas ar eventu nodošanu/citu komponenšu refrešošanu?

[codez]

Vienkārša situācija, piemēram, ar todo sarakstu.

Ar jquery tev būs jāraksta sekojošas funkcijas, kas maina izskatu:

- renderēt visu listu

- izdzēst elementu

- pievienot elementu

- atzīmēt kā izpildītu

- utt.

 

Ar react tu raksti, tikai:

- renderēt visu listu

[Wuu]

 

Main klasē padod "menu click callback" uz Menu komponentei (caur props)

 

tad, kad Menu komponentē notiek kliks, tu izsauksi padoto "menu click callback". Līdzi padod menu identifikatoru

 

Tālāk Main klase savā state uzstādīts activeMenuId (uzstādot state notiks rerender)

 

activeMenuId tiek caur props padots Satura komponentei

 

Tad, kad notiks rerender Satura komponente ielādēs saturu vadoties pēc padotā activeMenuId

var Main = React.createClass({

	getInitialState: function() {
		return {
			activMenuId: 1
		}
	},

	handleMenuClick: function(menuId) {
		this.setState({activMenuId: menuId})
	},

	render: function() {
		return (
			<Menu onMenuClick={this.handleMenuClick} />
			<Saturs menuId={this.state.activMenuId}
		);
	}

});

Šis variants nedarbojas , ja izlaiž React classi Menu caur "map". A huļi?

 

EDIT

{this.state.joblist.map(function(data) {
return (<Panel key={data.id} id={data.id} data={data} handleProgressUp={this.handleProgressUp} />);
})}

Nomainīju uz

{this.state.joblist.map(function(data) {
return (<Panel key={data.id} id={data.id} data={data} handleProgressUp={this.handleProgressUp} />);
}, this)}

EDIT 2

 

ko nozīme "()=>"

 

Piem: onClick={()=>this.props.handleProgressUp(this.props.id)}

 

Cik saprotu funkcija?

 

 

Edited May 20, 2015 by Wuu

[codez]

 

ko nozīme "()=>"

 

Piem: onClick={()=>this.props.handleProgressUp(this.props.id)}

 

Cik saprotu funkcija?

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Tā ir anonīma funkcija ar piebindotu this. ES6 standarts. react jsx transformeris to pārveido ES3 atbilstošā funkcijā, lai strādātu uz pārlūkiem, kuri vēl neatbalsta šo ES6 standarta daļu.

[Wuu]

Es tā arī nesapratu, kā ievietot funkciju ar piebindotu this, varētu piemēru? Nu, principa pēc :D (Lietošu ikdienā ()=>)

 

//čota takoje?

onClick={function() { this.props.balabala}}

Edited May 20, 2015 by Wuu

[codez]

bind(this) nozīmē, ka funkcija tiks izsaukta ar contextu this.

Kā var redzēt piemērā, ja netiek piebindots this (3 un 4 gadījumā), tad anonīmās funkcijas konteksts ir window un nav pieejama App react klase un nevar izsaukt funkciju add.

Ar arrow funkciju (5 un 6) pieraksts ir krietni īsāks

http://jsfiddle.net/d9crpzqy/10/

var App = React.createClass({
    getInitialState(){
      return {
        x:5
      }
    },
    add(d){
      this.setState({x:this.state.x+d});
    },
    render(){
      return <div>
          <div>X = {this.state.x}</div>
          <button onClick={function(){this.add(1)}.bind(this)}>Add 1</button>          
          <button onClick={function(){this.add(2)}.bind(this)}>Add 2</button>
          <button onClick={function(){this.add(3)}}>Add 3</button>
          <button onClick={function(){this.add(4)}}>Add 4</button>
          <button onClick={()=>this.add(5)}>Add 5</button>
          <button onClick={()=>this.add(6)}>Add 6</button>          
      </div>
    }
});

React.render(<App />, document.getElementById('app'));

Edited May 20, 2015 by codez

[Wuu]

Vienīga problēma, ka man Chromē nestrādā, un ne uz vienas mobilās ierīces ar. Tik FireFoxē.

Paldies par info!

[codez]

Tāpēc, ka jsx ir jātrasformē un to transformējot tiek transformētas arī ES6 arrow funkcijas:

https://facebook.github.io/react/docs/tooling-integration.html#jsx

 

 

Arrow funkciju piemērs jsfiddlē taču tev iet?

[Kasspars]

Wuu, tev ir jāiemācās dažas basic lietas par JavaScript.

 

Sāc ar scope

http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript

[Wuu]

Tāpēc, ka jsx ir jātrasformē un to transformējot tiek transformētas arī ES6 arrow funkcijas:

https://facebook.github.io/react/docs/tooling-integration.html#jsx

 

 

Arrow funkciju piemērs jsfiddlē taču tev iet?

 

Iespējams pie vainas ir React, cik skatos jsfidle ir ar addoniem. Man bez.

[codez]

Nē, fiidlē ir JSXTransformer.js, kurš pārveido javascript kodu pirms palaišanas. Bet, piemēram, pie produktu izstrādes es JSXTransformeri laižu servera pusē un man uz klientu uzreiz nāk ES3 saderīgs javascripts.

[Wuu]

Man arī ir JSXTransformer.js, nesapratu.

[Wuu]

    var CreatTable = React.createClass({
        getInitialState: function () {
            return({table: this.props.table, TEST: null}); //state pašā klasē
        },
        handelThSort: function(row) { //click
            this.setState({TEST: false});
            console.log(this.state.TEST); //state NENOMAINĀS
        }.....

A hulji nenomainās?

[codez]

Nav paredzēts, ka nomainās.

setState nenomaina state, bet tikai pasaka, ka vajag nomainīt. Un, ja nemaldos, reāla nomaiņa notiek saskaņoti ar renderēšanas kadriem (ne biežāk kā 60 reizes sekundē), kas ļauj veidot sarežģītas komponentes, kurās setState var tikt izsaukt ļoti daudz reižu, bet reālā komponentes stāvokļa maiņa tiek veikta tikai pa renderēšanas kadriem. Respektīvi tā ir optimizācija. Tu vari tajā handleXXXXX funkcijā uztaisīt ciklu ar 10'000 setState izsaukumiem, bet reāli state tiks nomainīt tikai vienu reizi. Tā ir optimizācija.

 

http://facebook.github.io/react/docs/component-api.html#setstate

 

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.