I have two different Spark Lists, with two different ItemRenderers, one of them with dragEnabled="true" and the other with dropEnabled="true", in such a way that whenever I drag from one and drop in the other, a copy of the object dropped is created and inserted in the second List's dataProvider.
<s:List id="source"
itemRenderer="componentsRenderers.SourceItemRenderer"
dragEnabled="true"
dataProvider="{elements}"/>
<s:List id="destination"
itemRenderer="componentsRenderers.DestinationItemRenderer"
dragEnabled="false"
dropEnabled="true"
change="destinationChanged(event)"/>
The event handler destinationChanged() is a method that parses the recently added object, removes it, and creates a new one that, among other stuff, has an UIComponent that has to be rendered.
The hole thing works well, except by one thing: as soon as the I load the application, the UIComponent of the first item to be dropped in destination never gets renderer. The full object is there and all the other functionalities related to it work, but the component doesn't get rendered. If I delete the object, making the List empty again, and insert it again, it gets rendered!
Also, after inserting the 'invisible' one, all the following inserts works.
Ideas?
Thanks!
Update: I just found out that the itemRenderer DestinationItemRenderer gets rendered twice for the first element to be dropped.
Related
following scenario:
I have a Firebase database containing a list that is used to create a set of "paper-cards" with dom-repeat:
<template is="dom-repeat" items="{{items}}">
<my-element card="{{item}}">
<paper-card id="{{card.id}}">
...
</paper-card>
</my-element>
</template>
In the UI, the user can add or delete paper-cards, so items also get deleted in Firebase.
Now I realized if I change the CSS of an element (e.g. fadeIn, fadeOut animation) and afterwards delete a card and later add one card, the card still has the CSS state as it was before (e.g. for fadeIn/fadeOut animations).
My questions:
How does DOM repeat deal with elements added or removed? Is not all information of this element "deleted"?
If I delete item #5 (out of 10), what happens to elements 6-10, are they deleted and re-created as "5-9" or "moved/altered"?
Besides CSS, are there any other implications that should be considered inside the template tag? Do I need to manually reset anything?
You can read about the dom-repeat on https://www.polymer-project.org/1.0/docs/api/dom-repeat but what it basically tells you that it tries to be too smart without asking the developer if it wants that behavior. The dom-repeat is heavily flawed because of this.
Polymer is saving performance to doing a dirty check, basically looping through everything and only changing the DOM if the checked values (id, in this case) changes. This means that it will inherit other values.
Basically, it wont update sub-properties. This means that dom-repeat isn't really made for any kind of update.
You can possibly go around this issue by using Polymer's this.splice(). It works like the splice in javascript but sends out an event to dom-repeat to update and where to update. Remember however, that arrays in Javascript are references, so if you take this.items and try to modify it, it will automatically update values the dom-repeat (without updating DOM) and then it will dirty check the update with the new values and not change anything at all. If you want to modify the array in the dom-repeat, then use JSON.parse(JSON.stringify(array) first to get rid of the reference.
Another thing you can do is to use the unique id. If the id changes for that specific card, then hard reset all values and initialize that specific card once again with all it's normal properties (including CSS). That's the workaround I use all the time.
The desperate thing to do, when nothing else works, is to nullify the array that keeps track of the cardset, with this.set('items', []) and then set the property with the new array.
The repeater evaluates the number of items in your array on initialization and stamps that many template instances into the DOM. If you delete an item from your array the repeater is presented with a new array that is one element less, removes the last one and propagates data change to elements' instances.
So if you start with 10 elements and order to delete #5 then element's #6 data is inserted via data-binding into the same DOM node that previously contained #5 data, and so on down the list. The last DOM node for which the updated array contains no data will be removed from the DOM tree.
I am using a static class in my application. It basically uses an access database, and copies itself to various lists.
When the user modifies some data, the data is updates in the list, using LINQ, if there is no entry in the list for the modification then it will add a new item to the list.
This all works fine.
However on the 1st data interrogation, I create the original list, basically all records in the users table, so I have a list lstDATABASERECORDS.
What I do after populating this list I do lstDATABASERECORDSCOMPARISON=lstDATABASERECORDS
this enables me to quickly check whether to use an update or append query.
However when I add to lstDATABASERECORDS a record is added in lstDATABASERECORDSCOMPARISON too.
Can anyone advise?
You are assigning two variables to refer to the same instance of a list. Instead, you may want to try generating a clone of your list to keep for deltas (ICloneable is unfortunately not that useful without additional work to define cloneable semantics for your objects), or use objects that implement IEditableObject and probably INotifyPropertyChanged for change tracking (there's a few options there, including rolling your own).
There's nothing built in to the framework (until EF) that replicates the old ADO recordset capability to auto-magically generate update queries that only attempt to modify changed columns.
I'm currently trying to apply a filter to the wxCheckListBox (for a search of specific elements). So far i have no idea how to do it. The Problem with it is, that I don't want to have a copy of the Control and always delete the unnecessary items from the copy, and as soon as the search changes it has to be copied again from the original and delete the items again. I was wondering if there is a way to simply hide some items and not the entire control
You can't hide the items in a wxListBox or wxCheckListBox. To have this sort of dynamic control over the items appearing in the control you need to use wxListCtrl in virtual mode.
However it's not usually really a problem to delete some items from a wxListBox and then insert them back (or, even simpler, store all the items, delete some of them from the control and then, to revert, clear the control and restore all the initially stored items).
I have a list that is mediated by a view mediator, so the data provider is managed by the said mediator (meaning it just calls viewComponent.list.dataProvider.addItemAt([object], 0) when new items are added to the list.
The list has a custom item renderer which has an addedEffect property (a basic fade in effect), which of course is supposed to play every time a new item is added to the list.
The issue is that the first time I add an item it works, but for any subsequent added items, it does not. Does anyone know the cause of this issue, or more preferably a fix?
Thank you in advance.
I'm not 100% sure, but my guess is that when useVirtualLayout is true, only a single item renderer is ever created. Multiple rows are accomplished by changing the itemRenderer's data, validating the component then taking a bitmap snapshot of it. Thus the item renderer is only ever added to the display list once, and the added event in turn is only ever fired once. Turning off useVirtualLayout forces the list to create new instances for each row in the list, so separate added events are dispatched.
I am using Drupal and have sifr set on list items, and also a, a:hover are set via Drupal so that the links hover. I looked at the sifr3-rules.js file drupal's render module creates and it looks good. and in fact my other sifr items look fine... But the list item ones are goofing for some reason... There is extra space below the list,
so if i have a list item, and inside of that, I have a unordered list with more list items, the Flash Object made in the 1st li (which will cover the rest of the sublist items too), is too bid so you see space under the children until the next parent li comes up. (so looks like extra bottom padding on that portion of the list in IE8... in FF almost similar but each subitem has space at bottom... with javascript turned off, you see the list items look fine by themselves)....
Also if the parent list item is shorter than the sub list items text, the width for the flash object is set only as long as the first list item, and therefore cuts off the rest the sublist item's text.
Any idea how to resolve any of these?
Only unusual thing i see i am doing is setting forceSingleLine and preventWrap (which dont make a difference if taken off).
****Edit, I may just try to figure out how to get Drupal's menu-block module to output a around my hyperlinks in the list items... then i can target the div's with my rule (and the a,a:hover rules will apply), so each menu item gets its own sifr object instead of sifr3 trying to figure out how to do the lists and sublists.
Very useful to me is anyone knows a way to target a hyperlink (<a> tag) and also allow a:hover rules. I know how to do it with pretend another tag that includes hyperlinks, like if i had <h2><a>sometitle</a></h2>, i could have a rule for h2, but then use the a, a:hover rules in the sifr3-rules.js file to target that. so i would need a way to target the hyperlink in the list, but also apply a :hover to it (not sure if this can be done since its not underneith for example the h2 tag).
I just overrode theme_menu_item
to return ''. $link ."". $menu ."\n"; (so added a div class). and used a sifr rule to target '.mymenu .menu_item'. then a sifr flash object is created for each list item hyperlink but won't try to wrap the whole list (and its sublists) like before. Seemed to fix both problems :)