Más contenido relacionado
La actualidad más candente (20)
Similar a AngularJSとFluxとRiotJSと (20)
AngularJSとFluxとRiotJSと
- 7. Flux s architecture
• Facebookが提唱したアーキテクチャ
• データの流れを一方向に限定する
• Store, View, Dispatcherの責務がActionという
単位で処理を回す
- 17. import * as action_creator from '../action-creators/example'
import store from '../stores/example'
class ExampleCtrl {
constructor ($scope) {
this.onReceiveData = this.onReceiveData.bind(this)
this.onDestroy = this.onDestroy.bind(this)
store.addReceiveDataListener(this.onReceiveData)
$scope.$on('$destroy', this.onDestroy)
action_creator.init()
}
select () {
action_creator.select()
}
onReceiveData () {
this.data = store.getData()
}
onDestroy () {
store.removeReceiveDataListener(this.onReceiveData)
}
}
angular.module('example').controller('ExampleCtrl', ExampleCtrl)
- 18. import dispatcher from '../dispatcher'
import action_types from '../action-types'
import injector from '../injector'
export function init () {
dispatcher.handleViewAction({
type: action_types.INIT_EXAMPLE_VIEW,
})
var Repository = injector.get('ExampleRepository')
Repository.fetch().then((data) => {
dispatcher.handleApiAction({
type: action_types.RECEIVE_EXAMPLE_DATA,
data
})
})
}
export function select () {
dispatcher.handleViewAction({
type: action_types.SELECT_EXAMPLE_VIEW,
})
var Repository = injector.get('ExampleRepository')
Repository.post().then((data) => {
dispatcher.handleApiAction({
type: action_types.POST_SELECT_EXAMPLE_DATA,
data
})
})
}
- 26. <todo>
<!-- layout -->
<h3>{ opts.title }</h3>
<ul>
<li each={ item, i in items }>{ item }</li>
</ul>
<form onsubmit={ add }>
<input>
<button>Add #{ items.length + 1 }</button>
</form>
<!-- logic -->
<script>
this.items = []
add(e) {
var input = e.target[0]
this.items.push(input.value)
input.value = ''
}
</script>
</todo>
http://riotjs.com/ja/