bezahlt von cJSv2: Services und Service-Injection
Ich hab cJSv2 jetzt soweit erweitert, dass man nun sich einfach in verschiedene Services in seine Controller injecten lassen kann (und ist dann unter seinem Namen oder einem Alias dort direkt aufrufbar). Jeder Service ist Singleton, so dass jeder Controller auf die selbe Instance des Services zugreift.
An sich wird damit die cjsGetController Methode, mit der sich Controller untereinander mit ihren Namen konnten, überflüssig und man kann einfach asynchrone/reactive Lösungen basteln.
Hier erst einmal ein kleines synchrones Event-System:
function EventBus() {
this.events = [];
this.register=function(event, callback){
if(!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
this.fire=function(event, payload){
if(this.events[event]) {
this.events[event].forEach(subscriber => {
subscriber(payload);
})
}
}
}
function Receiver(){
this.value="";
this.init=function(){
this.EventBus.register("update", (payload) => {
this.value = payload.value;
});
this.cjsPushBindings();
};
}
function Sender(){
this.values=[
'Blubb',
'Test',
'Brumm',
'Event',
'Something'
];
this.send=function(event){
this.EventBus.fire("update", {value: this.values[Math.floor(Math.random() * this.values.length)]})
};
}
<div cjs-controller="sender:Sender" cjs-services="EventBus">
<input type="button" value="fire event" cjs-binding-event="click:send"/>
</div>
<div cjs-controller="receiver:Receiver:init" cjs-services="EventBus">
<input type="text" value="" cjs-binding-value="value"/>
</div>
An sich wird damit die cjsGetController Methode, mit der sich Controller untereinander mit ihren Namen konnten, überflüssig und man kann einfach asynchrone/reactive Lösungen basteln.
Hier erst einmal ein kleines synchrones Event-System:
function EventBus() {
this.events = [];
this.register=function(event, callback){
if(!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
this.fire=function(event, payload){
if(this.events[event]) {
this.events[event].forEach(subscriber => {
subscriber(payload);
})
}
}
}
function Receiver(){
this.value="";
this.init=function(){
this.EventBus.register("update", (payload) => {
this.value = payload.value;
});
this.cjsPushBindings();
};
}
function Sender(){
this.values=[
'Blubb',
'Test',
'Brumm',
'Event',
'Something'
];
this.send=function(event){
this.EventBus.fire("update", {value: this.values[Math.floor(Math.random() * this.values.length)]})
};
}
<div cjs-controller="sender:Sender" cjs-services="EventBus">
<input type="button" value="fire event" cjs-binding-event="click:send"/>
</div>
<div cjs-controller="receiver:Receiver:init" cjs-services="EventBus">
<input type="text" value="" cjs-binding-value="value"/>
</div>
| User | annonyme | 2020-05-27 12:18 |
write comment: