[Dart+Polymer]
Hello,
I have PaperInput elements in a Polymer dom-repeat template. So, there are several, so on the #Listen I try to get the id, but it only retrieves id="labelAndInputContainer" (no matter what I do in the template).
Is there some trick to this? I've tried "everything" - over the past half a day!
Here is my HTML:
<template is="dom-repeat" items={{rgetThem}}>
<paper-card heading={{yyyy(item)}} >
<div class="card-content" >
<p style="color:red">ID:{{getID(item)}}</p>
<paper-input on-change="onchangepassword"
label='Password'
id={{getID(item)}}
floatingLabel>
</paper-input>
</div>
And the listener:
#Listen ('onchangepassword')
void onchangepassword(Event custEvent, var t) {
IronInput PI=custEvent.target;
Element yy=PI.parent;
String id=yy.id;
}
Any suggestions MOST welcome.
Thanks
Steve
You could try
Element yy=PI.parent.closest('paper-input');
The problem you're facing is paper-element encapsulates an iron-input element wrapped in div elements. Finding the closest paper-input will find the paper-input which the iron-input is encapsulated in, since that's the nearest one. I'm sure there are other ways to do it, but this works for me. In fact you could just do
Element yy=PI.closest('paper-input');
which will work just as well.
UPDATE:
Upon seeing the comment about dom-repeat event models, it occurs to me you may want a more Polymer Dart specific documentation link.
https://github.com/dart-lang/polymer-dart/wiki/data-binding-helper-elements#handling-events-in-dom-repeat-templates
As was suggested
model.item.id
And I'm not going to take credit for the updated part of my answer except the Dart specific link.
Related
I am trying to do drag and drop without deleting the item from the dragged list. I followed an example Working demo and tried to reproduce the same. Unfortunately it was not working and I found that the cdkDropListDropped event is emitted. You can find the issue in this link Problematic demo
I want to achieve like the Working demo
Please show me where I am wrong.
I found I had to move the directives cdkDropList and cdkDropListConnectedTo="drop-list" from the div with ID div1 to the parent div so the HTML becomes:
<div class="column left" cdkDropList cdkDropListConnectedTo="drop-list">
<div id="div1" cdkDrag *ngFor="let type of types" [cdkDragData]="type" (cdkDragMoved)="moved($event)" (cdkDropListDropped)="itemDropped($event)">
{{type.text}}
<div *cdkDragPlaceholder class="field-placeholder"></div>
</div>
</div>
At this point the cdkDropListDropped event fired and called the itemDropped function. The problem then was, there was a runtime error on the following line:
copyArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
After copying the itemDropped method from your working demo StackBlitz, it then started work. Please see this StackBlitz for a demo.
I have been scouring the web for a clear answer on how to query for an element generated by a dom-repeat element from Dart code.
sample.html
<dom-module id="so-sample>
<style>...</style>
<template>
<template is="dom-repeat" items="[[cars]] as="car>
...
<paper-button on-click="buttonClicked">Button</paper-button>
<paper-dialog id="dialog">
<h2>Title</h2>
</paper-dialog>
</template>
</template>
sample.dart
I'll omit the boilerplate code here, such as imports or the query to my database to fill the cars property ; everything works fine.
...
#reflectable
void buttonClicked(e, [_])
{
PaperDialog infos = this.shadowRoot.querySelector("#dialog");
infos.open();
}
This generates the following error :
Uncaught TypeError: Cannot read property 'querySelector' of undefined
I have tried several 'solutions', which are not, since nothing works.
The only thing I saw on quite a lot of threads is to use Timer.run() and write my code in the callback, but that seems like a hack. Why would I need a timer ?
I understand my problem may be that the content of the dom-repeat is generated lazily, and I query the items 'before' they are added to the local DOM.
Another advice I didn't follow is to use Mutation Observers. I read in the polymer API documentation that the observeNodes method should be used instead, as it internally uses MO to handle indexing the elements, but it again seems a bit complicated just to open a dialog.
My final objective is to bind the button of each generated model to a dedicated paper-dialog to display additional information on the item.
Has anyone ever done that ? (I should hope so :p)
Thanks for your time !
Update 1:
After reading Gunter's advices, although none of them actually worked by themselves, the fact that the IDs aren't mangled inside a dom-repeat made me think and query paper-dialog instead of the id itself, and now my dialog pops up !
sample.dart:
PaperDialog infos = Polymer.dom(root).querySelector("paper-dialog");
infos.open();
I now hope that each button will call the associated dialog, since I'll bind data inside the dialog relative to the item I clicked ~
Update 2:
So, nope, the data binding didn't work as expected: All buttons were bound to the item at index 0, just as I feared. I tried several ways to query the correct paper-dialog but nothing worked. The only 'workaround' I found is to query all the paper-dialog into a list and then get the 'index-th' element from that list.
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
List<PaperDialog> dialogs = Polymer.dom(this.root).querySelectorAll("paper-dialog");
dialogs[model.index].open();
}
This code definitely works, but it feels kind of a waste of resources to get all the elements when you really only need one and you already know which one.
So yeah, my initial problem is solved, but I still wonder why I couldn't query the dialogs from their id:
...
<paper-dialog id="dialog-[[index]]">
...
</paper-dialog>
#reflectable
void buttonClicked(e, [_])
{
var model = new DomRepeatModel.fromEvent(e);
PaperDialog dialog = Polymer.dom(this.root).querySelector("dialog-${model.index}");
dialog.open();
}
With this code, dialog is always null, although I can find those dialogs, correctly id-ied, in the DOM tree.
You need to use Polymers DOM API with shady DOM (default). If you enable shadow DOM your code would probably work as well.
PaperDialog infos = new Polymer.dom(this).querySelector("#dialog")
sorry for my silly question.
I have a problem with the "core-list-dart" element. Appart from the fact that it does not create the "infite" elements when needed, it seems to populate the "content" initially. (I am sure it didn't do that earlier this year ;) and it worked as expected -> creating elements as you scroll down)
Seems to be broken in polymer/js too, or do I missunderstand anything about that: http://www.polymer-project.org/components/core-list/demo.html
Experimenting around with the core-list-dart, I stumbled upon scrollTarget which will have an Element as parameter:
How do I pass an Element to the core-list-dart? Are there any examples which do data-binding on other Elements?
Many thanks for now .. hope somebody can understand my problem :D
Working with Dart 1.6
and:
dependencies:
core_elements: ">=0.2.0 <0.3.0"
paper_elements: ">=0.1.0 <0.2.0"
polymer: ">=0.13.0 <0.14.0"
You can do that for example with
<core-list scrollTarget="{{$['id_of_other_element']}}">...</core-list>
in this case the element has to be in the same shadow DOM (same Polymer element) as the <core-list> and it must be statically available (not within <template if=...> or generated by <template repeat=... nor added imperatively.
Another variant is to create a field
<core-list scrollTarget="{{scrollTarget}}">...</core-list>
In the class of your Polymer element you need
#observable
Element scrollTarget;
attached() {
super.attached();
scrollTarget = shadowRoot.querySelector('...');
}
I'm trying to use jquery-ui sortable with nested templates in Meteor, as follows. Here are the two templates in question:
<template name="activityEditor">
{{! the main activity editor view }}
<div class="activity-editor">
<input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
<div class="activity-steps">
{{#each info.steps}}
{{>activityStepEditor}}
{{/each}}
</div>
</div>
</template>
<template name="activityStepEditor">
{{! the container view for each step editor }}
<div class="activity-step" data-id="{{_id}}">
<div class="order">{{order}}</div>
{{!....stuff...}}
</div>
</template>
and the template code (using coffeescript):
_.extend Template.activityEditor, {
# ...stuff...
rendered: ->
$(".activity-steps").sortable {
items: '.activity-step'
handle: '.order'
update: ->
stepIds = ($(el).attr('data-id') for el in $('.activity-step'))
$('.activity-steps').empty() #this must be done in order to steps to re-render properly
Lab.Activity.reorderSteps stepIds
}
$(".activity-steps").disableSelection()
}
The only way I can get this code to work and properly rerender the order is by emptying the container of my sortable elements right after they update with $('.activity-steps').empty(). I've tried cancelling the update event and forcing a rerender by changing another variable watched in the context, but any change causes Exception from Meteor.flush(): undefined after which I can't rerender anything until page reload.
This seems to work, and everything rerenders great. So my question is: is there any reason why I shouldn't do this? Is there a better, standard practice way to handle the sortable that I'm not seeing?
In the near future there'll be a better way to do it, as Meteor team is developing its new rendering engine: http://youtube.com/watch?v=ISNEhPG0wnA
(in this video, Avital Oliver shows exactly a way to do it without redrawing the screen: the object in the list is actually moved on all clients)
See this Meteor's Github Wiki entry for more technical info:
http://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
While that's not officially published, if you need it right now, you could try Nazar Leush's approach:
http://github.com/nleush/meteor-todos-sortable-animation
He also published a working example here: http://todos-dnd-animated.meteor.com
How does Stack Overflow show interactive character limits? Like when editing comments, it shows you how many characters you have left, as well as warning if it is too few.
I'd like that exact functionality in my Ruby on Rails... But not sure how to do it?
Stackoverflow uses the jQuery JavaScript Framework and it has a lot of existing scripts and plugins for this sort of thing.
One example is this Interactive Character Limit for TextArea in jQuery demonstrated here.
I'm sure there are others as well.
I use the following JavaScript function to restrict max length in textareas
function checkLength(edit, maxlen)
{
if (edit.value.length > maxlen)
edit.value = edit.value.substring(0, maxlen);
document.getElementById('remaining').innerHTML = edit.value.length;
}
Link this to your textarea's onKeyDown and onKeyUp attributes:
onKeyDown = "checkLength(this, 100);"
by using the onkeydown event on the input. There are millions of examples out there and frankly I'd be surprised if this isn't a duplicate question.
It is: How to show interactive character limits?
I think you are looking for some javascript, basically you add a handler to the textbox onkeypress event then to get the current length:
mytextbox.value.length
and to limit it you could do something like:
if (mytextbox.value.length > maxlimit)
mytextbox.value = mytextbox.value.substring(0, maxlimit);
You can also use simple javascript event handling to show character counts
for input elements. No server side processing required.
This javascript catches the key-press event for a text area "txt"
and shows the character count in a span "count".
See it running at
http://aaron.oirt.rutgers.edu/myapp/root/charCount.html
<html>
<head>
<script>
function go() {
var txt=document.getElementById("txt");
txt.onkeydown = countTxt;
}
function countTxt() {
var txt=document.getElementById("txt");
var count=document.getElementById("count");
count.innerHTML = txt.value.length+1; // count the character not shown yet ;)
}
</script>
</head>
<body onload="go()">
<h3>type in the text area and see the count change</h3>
<textarea id="txt" rows="8" cols="30"></textarea>
<br>
count: <span id="count"> 0</span>
</body>
The count can be off my +-1 -- fixing that (if you really want to) is left to the reader.