Need help with a concept. Building a custom element that displays data from my database. Using a repeat template and it working great. The report is grouped and so each row in the report contains another level of data that is displayed once you drill into a row. So now I want to be able to "refresh" the report data to reflect sort or grouping changes. The report is based off an "indexing" array that points to the actual data displayed. I sort/group the data in the index array, and use this array as the array for the Template Repeat.
<div id="rptbody">
<template repeat="{{group in groups}}">
<pmg-group groupid={{group.id}} groupval={{group.groupval}} groupobj={{group.groupobj}}></pmg-group>
</template>
</div>
So in this example, the groups array is a list of keys to my data. In this example, the groups array is ordered properly so that [0] contains the first index to the data array, and [length-1] contains the last. I have a sort routine that changes the index value in groups, but it does not add or remove items from the groups array.
So my question is after my resort, how do I trigger the template to rescan the groups list? I have found that I can set groups = [], and then reload groups ( groups.push({idx} ) from my master index, and it will update the template, however that seems kind of wasteful to me.
Is there any way to trigger the template to refresh, or rescan the groups array and reorganize the DOM based on the changes in the values?
In the past I've gotten template repeats to refresh like this:
var template = document.querySelector('template'); // Use specific selector here
template.iterator_.updateIteratedValue(); // Force Polymer to refresh template
It's a hack, but it looks like it still works. Here's a jsbin.
Just stumbled on this and found out we have to use the .set method of the Polymer element data model. Not directly found any docs about this but this seems interesting https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#set-path. Would avoid those hacky things because they could change API over the time.
Related
I am working on a form in which I need to take numeric value from one field and based on that number(n) I need to create n fields for another column. How can I do so?
Probably you can use APEX_ITEM API if I understand your task right:
https://docs.oracle.com/en/database/oracle/application-express/19.2/aeapi/APEX_ITEM.html
Something like this:
SELECT APEX_ITEM.TEXT(rownum)
FROM DUAL
CONNECT BY rownum < :YOUR_ITEM;
You will not be able to create n page items in a declarative way. APEX simply wasn't made for this.
I can think of two workarounds:
Use a plsql dynamic content region to generate html with the apex_item package just like Ivan Dubashinskii suggested. You will need to submit the page in order to have the region re-generate your page items when the amount n is changed. There are some downsides to this approach, as for example it won't be that simple to use your page items in a page process.
Just limit your page items to some number, like 10. Then, create 10 page items in a declarative way and use dynamic actions to show/hide them when n changes. This way, it will also be much easier to use your items in a page procress.
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 have a sorted list of objects that I want my users to select a range from. For this I added two select elements (called from and to)to my web page. from is filled directly from the list, like this:
<select id="from">
{% for el in el_list %}<option>{{el.number}}</option>{% endfor %}
</select>
Once a value has been selected in from I'd like to populate to with the values from the selected value until the last one.
The list is sorted by the number attribute on python's side so I guess all I need to do is find the selected element in the list, slice the list accordingly and use the rest to populate my second select.
I've searched the documentation and several snippets but so far I've only found filters giving me the last or the first element of a list. I also know I can check if the selected value is in my list using in, but how can I then get that object's index?
I know I could probably run along the whole list with a for ... if, but I am almost sure there's a more elegant method out there, that I simply haven't found yet.
If any of you could provide me with a few pointers on how to solve this more elegantly it'd be much appreciated.
I don't know why you're looking through template tags for this. They won't help: by the time the user sees the page to select something from the from select, the template has already been rendered. You need to use Javascript.
I'm trying to find the best way to go about my problem and I would love your input. I am trying to allow users to scan multiple barcodes into a text area. After they are submitted they are split into an array. The user then inputs how many iterations of each value in the array are to be inserted into a MySQL database. I've achieved this using PHP and session variables, looping through the array one step at a time. With Django I've found it a little more difficult and I am wondering if I should just have a "temporary" table in my database that gets refilled with the values from the array of barcodes. The following pages then pull each value from the table instead of using any sort of session variables.
Edit:
I apologize for the confusing question. Let me try and clear it up a bit:
I need to render a view based on each value in the user-submitted array. When it is first submitted, a view is rendered for the first value. When the user hits "Next" a view will be rendered for the second value in the array, and so on.
As for the database issue, each value can have two "types." The user will declare how many of each type is added to the database in each of the views I am trying to render.
Thank you.
this is nothing about django.
forget that temporary table.
add a field "filled" to ur table
select 1st not-filled row, and show "refill" page by this row
then update user input number back to db, set "filled" to "true" at same time.
You probably can port your PHP solution using a Django session object.
I'm not sure if that "one item at a time" is a feature or a "it was easier to code that way" thing, but in the second case - you may want to use Django Formsets to display all items at once and avoid looping through the array.
I've got a spark list that gets dynamically filled.
So far the new items appear at the bottom of the list. What I'd like to do is to add them at the top.
The items in the list have a unique ID so some kind of sorting mechanism would probably do the trick as the new items have a greater ID than the old ones.
What I'd like to avoid is some complex method behind this as I'm working on a mobile platform and the list can get quite big so I need this to be as efficient as possible.
The list's data provider is an ArrayList that gets updated using binding.
How can that be done?
Thanks in advance!
u can Add the items at the starting index of the datagrid. Flex datagrid automatically renew all the indexes and add 1 to all existing element indexes. So
YourDataGridId.dataprovider.addItemAt(item,0) will do.