slavik57 / eyepatch Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Hi @slavik57
I cannot find GlobalEvent to import as per the example. I looked at your src in node_modules and also cannot find it. I also cannot see it in the *.d.ts src.
The statement
import {GlobalEvent} from 'eyepatch'
does NOT resolve GlobalEvent in the eyepatch library.
It seems that your latest push are not yet at npm.
Thanks for your help.
Hi Slavik,
I would like to create a switch based on what itemChange occurred with the ObservableDictionary or Collection. However, it is proving rather verbose. It would be much easier if there was a boolean in eyepatch indicating that an item was removed for added to the observable. Thus I could do the following quite easily:
So, if eyepatch had a boolean isItemAdded or isItemRemoved, the following could be done:
this.dictionary.itemsChanged.on(
item => {
switch (isItemAdded){
case true:
let objectAdded = item.added
console.log( Item added| ${JSON.stringify( objectAdded )}
)
// run some other code
break
case false:
// if item was not added then the change MUST be item removed
let objectRemoved = item.removed
console.log( `Item removed| ${JSON.stringify( item.removed )}` )
//run alternative code
break
}
} );
Please let me know what you think.
Thanks
Hi Slavik,
It appears that the remove() method on the Observable dictionary is not working.
I have the following code
ngOnInit() {
this.dictionary.itemsChanged.on(
item => {
if ( item.added.length > 0 ) {
console.log( 'ITEM ADDED' )
console.log( `ITEM ADDED| ${JSON.stringify( item.added )}` )
console.log( `POST ADDITION KEYS| ${JSON.stringify( this.dictionary.keys )}` )
console.log( `POST ADDITION VALUES| ${JSON.stringify( this.dictionary.values )}` )
this._eventBusSrvc.emit( 'phone[->OverlayPanel]Cmp::phone', item.added )
}
if ( item.removed.length > 0 ) {
let objectRemoved = item.removed
console.log( 'ITEM REMOVED' )
console.log( `ITEM REMOVED| ${JSON.stringify( item.removed )}` )
console.log( `POST REMOVAL KEYS| ${JSON.stringify( this.dictionary.keys )}` )
console.log( `POST REMOVAL VALUES| ${JSON.stringify( this.dictionary.values )}` )
console.log( `Item removed| ${JSON.stringify( item.removed )}` )
}
} );
}
...
this._eventBusSrvc.observe( 'phone[->[Container]Cmp::phone' )
.subscribe( phone => { this.dictionary.add( { containerIndex: this.containerIndex }, { phone: phone } )
this._eventBusSrvc.observe( 'phone[->Container]Cmp#detach::rowIndex' )
.subscribe(
rowIndex => {
this.rowIndex = rowIndex
if ( rowIndex == this.container.length ) {
this._notificationSrvc.warn(
'Cannot remove the last or only phone entry!' )
}
else {
this.container.detach( rowIndex - 1 );
this.phones.map.delete( rowIndex );
console.log(`rowIndex | ${rowIndex}`)
console.log(`DICT VALUES BEFORE REMOVAL| ${JSON.stringify(this.dictionary.values )}` )
this.dictionary.remove( {"containerIndex":0} )
console.log(`DICT VALUES AFTER REMOVAL| ${JSON.stringify(this.dictionary.values )}` )
}
} );
Running the above code give the following
item iserted @ 0
ITEM ADDED
ITEM ADDED| [{"key":{"containerIndex":0},"value":{"phone":{"type":"Mobile","provider":"Digicel","number":"(654) 545-4447"}}}]
POST ADDITION KEYS| [{"containerIndex":0}]
POST ADDITION VALUES| [{"phone":{"type":"Mobile","provider":"Digicel","number":"(654) 545-4447"}}]
Removed array length 0
item iserted @ 1
ITEM ADDED
ITEM ADDED| [{"key":{"containerIndex":1},"value":{"phone":{"type":"Home","provider":"Vodaphone","number":"(234) 242-3423"}}}]
POST ADDITION KEYS| [{"containerIndex":0},{"containerIndex":1}]
POST ADDITION VALUES| [{"phone":{"type":"Mobile","provider":"Digicel","number":"(654) 545-4447"}},{"phone":{"type":"Home","provider":"Vodaphone","number":"(234) 242-3423"}}]
Removed array length 0
rowIndex | 1
DICT VALUES BEFORE REMOVAL| [{"phone":{"type":"Mobile","provider":"Digicel","number":"(654) 545-4447"}},{"phone":{"type":"Home","provider":"Vodaphone","number":"(234) 242-3423"}}]
DICT VALUES AFTER REMOVAL| [{"phone":{"type":"Mobile","provider":"Digicel","number":"(654) 545-4447"}},{"phone":{"type":"Home","provider":"Vodaphone","number":"(234) 242-3423"}}]
NOTE THE item.remove is NEVER TRIGGERED AND THE DICT VALUES AFTER REMOVAL attempts displays identical values.
So, it would appear that the dictionary.remove is not working.
Let me know if this is so.
Cheers
Hi
According to the docs
ObservableDictionary - Works with keys as an object and not only strings and numbers. Notifies on changes. Works simply adding non enumerable property as the key id. This doesn't affect the JSON.stringify method nor the for in loop.
If I use an object as the key below there is no problem, but if I use number as the key the error is generated.
I have the following
// IPhone is an interface
private _phone = new ObservableDictionary<number, IPhone>();
...
_phone.add(2, phone) // throws error
When I run the application an error is thrown at the line immediately above with the following:
EXCEPTION: Cannot use 'in' operator to search for '__$observableDictionary2$keyId$__' in 2
ErrorHandler.handleError @ error_handler.js:47
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
error_handler.js:53 TypeError: Cannot use 'in' operator to search for '__$observableDictionary2$keyId$__' in 2
at ObservableDictionary.containsKey (observableDictionary.js:87)
at ObservableDictionary.add (observableDictionary.js:57)
at SafeSubscriber._next (phone.component.ts:126)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
at SafeSubscriber.next (Subscriber.js:172)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at DebounceTimeSubscriber.debouncedNext (debounceTime.js:98)
at AsyncAction.dispatchNext (debounceTime.js:114)
at AsyncAction._execute (AsyncAction.js:111)
ErrorHandler.handleError @ error_handler.js:53
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
data.args.(anonymous function) @ zone.js:970
observableDictionary.js:87 Uncaught TypeError: Cannot use 'in' operator to search for '__$observableDictionary2$keyId$__' in 2
at ObservableDictionary.containsKey (observableDictionary.js:87)
at ObservableDictionary.add (observableDictionary.js:57)
at SafeSubscriber._next (phone.component.ts:126)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
at SafeSubscriber.next (Subscriber.js:172)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at DebounceTimeSubscriber.debouncedNext (debounceTime.js:98)
at AsyncAction.dispatchNext (debounceTime.js:114)
at AsyncAction._execute (AsyncAction.js:111)
``
Hi Slavik,
I have the following code snippet:
ngOnInit() {
this.observableDictionary.itemsChanged.on(
item => {
if ( item.added.length > 0 ) {
console.log( `ADDED ${JSON.stringify( item.added )}` )
}
if ( item.removed.length > 0 ) {
console.log( `REMOVED ${JSON.stringify( item.removed )}` )
}
} );
this.form.valueChanges.debounceTime( 500 )
.subscribe(
values => {
console.log( this.observableDictionary.keysAndValues )
console.log('Logging value changes')
} )
}
Even though the item added or removed from the observable dictionary is correct, the
console.log( this.observableDictionary.keysAndValues )
is always an empty array.
What am I doing wrong here?
Thanks
Hi,
I am trying to use your eyepatch library. What I would like to do is to raise and event in one class and subscribe to the event in another typescript class. Is this possible?
classB{
var event = new EventT();
event.raise(5)
}
subscribe to the event in this class
classC {
// How do I subscribe the event raised in classB in this class classC
}
Thanks
Hi Slavik. Season's greetings.
I have the following code
let time: number = 0
this.$dictionary.itemsChanged.on(
item => {
if ( item.added.length > 0 && this._status && this.keyFound ) {
this.emit$dictionary()
}
if ( item.removed.length > 0 ) {
// decrement or increment runs many times ? bug
console.log(`Print | ${++time}`)
}
} );
When an item is added, the code runs once.
When an item is removed from the dictionary, the block with below code runs four (4) times.
if ( item.removed.length > 0 ) {
// decrement or increment runs many times ? bug
console.log(`Print | ${++time}`)
}
} );
I found out because I was attempting some decrement in the block and each time instead of a single decrement, 4 decrements occurred which was undesirable.
Have a look and let me know what you think.
Cheers
Adding same items to multiple dictionaries and removing them should act normally.
After adding items and removing from one dictionary the other should contain it and the first should not
Hi,
Given that eyepatch deals with changes, would you mine adding tracking changes to the properties of an Object?
Currently there aren't many that support typescript and do this. It would be nice if the change tracking had a similar convention to collection and dictionary.
Cheers
Hi,
Given an instance of the dictionary
$dictionary = ObservableDictionary<number, IPhone)
I try to find the key with the following
var foundKey = $dictionary.findKey(2);
but it will not accept the integer as key.
What is the correct method?
Thanks
Hi Slavik,
Is there any implementation reason why the method
private _getAllKeyValuePairs(): IKeyValue<TKey, TValue>[] {
var result: IKeyValue<TKey, TValue>[] = [];
for (var keyId in this._keyIdsToKeysMap) {
var key: TKey = this._keyIdsToKeysMap[keyId];
var value: TValue = this._keyIdsToValuesMap[keyId];
result.push({
key: key,
value: value
});
}
return result;
}
... could not be made public for users to access. I created one using both keys and values but looking through your source I see the method above that performs the same thing. I use it for diagnostic purpose to dump all pairs to view them. I am thinking of also using it to to persist the data.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.