I have a dom-repeat element that creates a paper-radio-group with a couple of paper-radio-buttons. These radio-buttons each contains two pieces of unique information loaded from an array. Model name and price. I need to be able to load the model name and price of the selected radio-button.
I'm able to load the name of the selected model but I can't figure out how to do it with the price at the same time. Here is the code I currently have that displays the name:
<paper-radio-group class="layout vertical" id="modelgrp" selected="{{selected}}" >
<template is="dom-repeat" items="{{models}}" >
<paper-radio-button name="{{item.model}}" id="modelsel"><span>{{item.model}}</span> <div class="paper-font-caption"><span>{{item.price}}</span> SEK</div></paper-radio-button>
</template>
</paper-radio-group>
<paper-item><span>{{selected}}</span></paper-item>
I need to be able to call the item.price of the selected item just like I call the item.model by writing {{selected}}.
I was sent this link as it is sort of answering my question but I don't really understand the code and how to apply it to mine.
Use selected-item and add a conditional attribute for each value (model and price) onto the paper-radio-button element:
<paper-radio-group class="layout vertical" selected-item="[[selectedItem]]">
<template is="dom-repeat" items="[[models]]" >
<paper-radio-button name="{{item.model}}" model$="[[item.model]]" price$="[[item.price]]"><span>[[item.model]]</span> <div class="paper-font-caption"><span>[[item.price]]</span> SEK</div></paper-radio-button>
</template>
</paper-radio-group>
<paper-item><span>[[model]]</span></paper-item>
<paper-item><span>[[price]]</span></paper-item>
Then setup an observer to monitor changes to selectedItem and set the two values you want to capture as follows:
...
observers: [ '_selectedItemChanged(selectedItem)' ],
_selectedItemChanged: function(el) {
this.price = el.getAttribute('price');
this.model = el.getAttribute('model');
},
...
Related
I have a dom-repeat template and I want to be able to sort the list real time. So, the way I went about it is the way below. However, I need a way to refresh that dom-repeat when a user selects a new selection from paper-menu.
Typically, a modification to the result set array would do it. But in this case, a change in sorting the list doesn't require adding or removing anything in that array set(therefore no array mutation).
How could I get <template is="dom-repeat" items="[[pic.results173]]" as="url" sort="_sortList"> to refresh?
<paper-menu-button>
<paper-button class="dropdown-trigger" raised>
<iron-icon icon="visibility"></iron-icon>
<span>View By</span>
</paper-button>
<paper-menu id="viewMode" class="dropdown-content" selected="0">
<paper-item>Most Recent</paper-item>
<paper-item>Least Recent</paper-item>
<paper-item>Highest Price</paper-item>
<template is="dom-repeat" items="[[pic.results173]]"
as="url" sort="_sortList">
_sortList: function(first, second) {
var el = this.$.viewMode;
var listMode;
switch(el.selected) {
case 0:
listMode = this._mostRecent(first , second);
break;
}
return listMode;
},
The developers guide has your answer. Give your template an id (say id="list") and call this.$.list.render()
I'm setting up a contact list in Polymer 1.0. When the user clicks on a name, there should be a (animated) page opened for further details. All of these data elements are pulled from an external .json file.
Two questions for this approach..:
1) where to begin? How do I wrap, for example, an iron-page or neon-animated-page around my current setup (which is searchable, which is also the -temporary- reason it's a dom-repeat instead of an iron-list):
<template id="resultlist" is="dom-repeat" items="{{data}}" filter="contactFilter">
<paper-item>
<paper-item-body two-line>
<div>{{item.name}}</div>
<div secondary>{{item.number}}</div>
</paper-item-body>
</paper-item>
</template>
2) For quick try-out with binding options I've created an paper-dialog (instead of an page behaviour) which displays further data for the chosen person... On top of that paper-dialog should the chosen name being displayed. But I only get the first name of the array in my .json file. How can I setup the code to display the {{item.name}} of the chosen item?
Ps. I'm aware of the contacts-app from Rob Dodson (https://github.com/robdodson/contacts-app), but I can't figure out how it should be done in Polymer 1.0.
Update 27.10.2015
After Hugo's answer I'm not able to get the solution to work in an dom-module structure.
Sorry for misunderstanding, but I can't figure out where I'm wrong.
Having to following:
phonebook.html, which acts like an index
...
<body unresolved>
<template is="dom-bind" id="application">
<neon-animated-pages selected="[[selected]]" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
<contact-list></contact-list>
<contact-details></contact-details>
</neon-animated-pages>
</template>
<script>
var application = document.querySelector('#application');
application.selected = 0;
document.addEventListener('show-details', function() {
application.selected = 1;
});
document.addEventListener('show-list', function() {
application.selected = 0;
});
</script>
</body>
DOM-module contact-list.html, the list it self.
<dom-module id="contact-list">
<template>
<style include="phonebook-styles"></style>
<iron-ajax url="../data/data.json" handle-as="json" last-response="{{data}}" auto></iron-ajax>
<div class="container">
<h3>Contactlist:</h3>
<div class="template-container">
<template is="dom-repeat" id="templateUsers" items="{{data}}">
<paper-item on-tap="showDetails">
<paper-item-body two-line>
<div>{{item.name}}</div>
<div secondary>{{item.phonenumber}}</div>
</paper-item-body>
<div class="item-details-link">
<iron-icon icon="account-circle"></iron-icon>
</div>
</paper-item>
</template>
</div>
</div>
</template>
<script>
Polymer({
is: 'contact-list',
properties: {
selectedContact:{
type:Object,
value:function(){
return null;
}
}
},
showDetails: function(ev) {
var data = this.$.templateUsers.itemForElement(ev.target);
//alert(JSON.stringify(data)) // works with data chosen data selection...
this.selectedContact = data;
this.fire('show-details', this.selectedContact);
}
});
</script>
</dom-module>
DOM-module contact-details.html, the details-list.
<dom-module id="contact-details">
<template>
<!-- Do I need to declare the .json in my details module? -->
<iron-ajax url="../data/data.json" handle-as="json" last-response="{{data}}" auto></iron-ajax>
<paper-icon-button icon="arrow-back" on-tap="showList"></paper-icon-button>
<h3>Contact details</h3>
<template is="dom-repeat" items="{{data}}">
<div>{{selectedContact.name}}</div>
</template>
</template>
<script>
Polymer({
is: 'contact-details',
showList: function() {
this.fire('show-list');
}
});
</script>
</dom-module>
Everything, like the transitions, work. The chosen contact is also displayed in an alertbox (commented out in contact-list.html), but isn't forwarded to the contact-details.html page.
There are multiple steps to implement the solution:
Setup the neon animated pages ( one page would be the contact list, the other page would be the details )
Display the list of contacts ( you already have this one )
Add a "selectedContact" property to your element
Add a tap/click handler to the list items element and inside the handler set the selectedContact. You need to get the contact item from the DOM element clicked. ( Check an example here : http://jsbin.com/lofarabare/6/edit )
You can bind the contact details page elements to the selectedContact properties, e.g {{selectedContact.name}}
Inside the handler also Change the neon animated pages selected property to have it display the animation to the other page.
-- Extra feedback
I checked the way you handle events, feedback below:
Give the elements some id so you can add the event listener directly to them (e.g application.$.myContactList.addEventListener('show-detail',function(ev){...})
The way you fire the event from the contact-list is correct, however you are not reading the event data inside the event listener for the 'show-detail' event. The event listener receives the event as argument "ev". You can get the event data using ev.detail
With the event data (the selected contact) you can update your contact details component. Give it some id like 'details' and just update the 'selectedContact' property. **You need to declare the selectedContact in the details component, right now you don't have it there **
I have a question regarding dom-repeat. I have two different elements like:
<host-element>
<item-element></item-element>
<item-element></item-element>
</host-element>
each item-element has an array, in which items can be added at runtime. When the item-element
is attached is fires an event, so that the host-element knows about the item-element within its content and adds each
item-element to an array of item-elements to a property. To access the item-element
item arrays you could bind to the property of the host-element like:
<host-element items="{{itemElements}}">
<item-element></item-element>
<item-element></item-element>
</host-element>
to print the content of the itemElements iterate over it with dom-repeat
<template is="dom-repeat" items="{{itemElements}}">
<ul>
<template is="dom-repeat" items="{{item.values}}" as="value">
<li>[[value]]</li>
</template>
<ul>
</template>
so far everything works as expected. When the item-element change the dom-repeat
should redraw itself, but it is not happening. The documentation states you could uses dom-repeat.observe or dom-repeat.render
to update the dom-repeat element. Using dom-repeat.render manually works and could be
run automatically, but is not ideal. Therefor I am trying to find a solution with dom-repeat.observe with no luck so far.
<template is="dom-repeat" items="{{itemElements}}" observe="values.splice">
<ul>
<template is="dom-repeat" items="{{item.values}}" as="value" observe="????">
<li>[[value]]</li>
</template>
<ul>
</template>
I have pushed my source to github at source and a live demo
Thanks for your help.
Sandro
I have found a hack to get it to work. I need to alter the array holding all items.
The function _itemElementChanged is called every time a item-element is changed.
_itemElementChanged: function(){
// the check is needed if this function is run multiple times in the same tick it would erase the whole array
if (this.items.length > 0){
var itemsTmp = this.items;
this.items = [];
this.async(function () {
this.self.items = this.items;
}.bind({items: itemsTmp, self: this}));
}
}
The check for of this.items.length > 0 is need incase _itemElementChanged is called twice
before the async function runs. In that case this.items would end up empty.
This is by fare not a satisfying solution, but its the only working on I found so far.. I have updated the source to include the solution.
I have added an item to my data property bound to an iron-list.
this.data.push(item); // add new item to array
Now the data item has been added but the list will not refresh / reload to show new item added to data array. How do you reload the iron-list? Also couldn't seem to find a method on the iron-list API page. I've tried the following but with no joy...
var list = this.querySelector("iron-list");
list.fire('refresh');
list._refresh();
My data property is defined as follows:
Polymer({
is: "page-list",
properties: {
data: {
type: Array,
notify: true
}
The template structure is:
<iron-ajax url="./data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item" class="fit">
<template>
<div class="row">
<p>[[item.name]]</p>
</div>
</template>
</iron-list>
You will need to use a Polymer function to add a new item, like this -
this.push('data', item);
Mutations to the items array itself (push, pop, splice, shift,
unshift) must be performed using methods provided on Polymer elements,
such that the changes are observable to any elements bound to the same
array in the tree.
You can read more from here.
I have a general question. One of the major benefits of building a new polymer element is that it can be used like a native HTML element in a page. So, depending on the element that you build, it's logical that you would be able to add multiple instances of that element in a page.
Say I build a simple task list polymer element that has multiple views. A simple view that just lists the task names in a list and a detailed view that list the tasks and many other properties of the task in a list.
Then I add the element to my page multiple times. Maybe I want one instance of the element to list tasks related to Home and another to list tasks related to Work. But I want to send a link to someone with the Home task list opened in the simple view and the Work task list opened in detailed view. Or maybe I want the Home task list opened in edit mode and the Work task list opened in view mode.
How would you build the element so that you can change attributes/settings to more then one of these elements on a page?
The beauty of polymer is that you can change your component view by just adding / changing attributes to it.
Create custom tags and provide specific attributes depending on your requirement (HOME / WORK profile), and change your view accordingly.
Example:
Step 1: Create task container
<polymer-element name="task-list" noscript>
<template>
<h3>Tasklist</h3>
<core-menu id="tasks">
<content></content>
</core-menu>
</template>
</polymer-element>
Step2: Create task component
<polymer-element name="add-task" attributes="label detail">
<template>
<div id="task">
<input type="checkbox" id="tick" on-click="{{lineThrough}}" /> {{label}}
<div style="color:#999;margin: 5px 25px;">
{{detail}}
</div>
</div>
</template>
<script>
Polymer('add-task', {
lineThrough: function() {
this.$.task.style.textDecoration = this.$.tick.checked ? 'line-through': 'initial';
}
});
</script>
</polymer-element>
And now using above components, you can create your basic task list:
<task-list>
<add-task label="Learn Polymer" detail="http://www.polymer-project.org/"></add-task>
<add-task label="Build something great" detail="create polymer element"></add-task>
</task-list>
Screenshot
Now, To have control over changing task view (list / detailed / editable). Just add 2 attributes to task-list component. To control child view add-task from parent task-list element, you need to publish properties of your child element.
Your child component should be:
<polymer-element name="add-task" attributes="label detail">
<template>
<div id="task">
<template if="{{isEditable}}">
<input value="{{label}}" />
</template>
<template if="{{!isEditable}}">
<input type="checkbox" id="tick" on-click="{{lineThrough}}" /> {{label}}
</template>
<template if="{{isDetailed}}">
<div style="color:#999;margin: 5px 25px;">
{{detail}}
</div>
</template>
</div>
</template>
<script>
Polymer('add-task', {
publish: {
isDetailed: false,
isEditable: false
},
lineThrough: function() {
this.$.task.style.textDecoration = this.$.tick.checked ? 'line-through': 'initial';
}
});
</script>
</polymer-element>
Parent component with required attributes
<polymer-element name="task-list" attributes="editable detailed">
<template>
<h3>Tasklist</h3>
<core-menu flex id="tasks">
<content></content>
</core-menu>
</template>
<script>
Polymer('task-list', {
editable: false,
detailed: false,
domReady: function() {
var items = this.$.tasks.items;
for(var i = 0; i < items.length; i++) {
items[i].isDetailed = this.detailed;
items[i].isEditable = this.editable;
}
}
});
</script>
</polymer-element>
That's it, now you can control your task view by specifying required attributes to your parent component.
<task-list detailed editable>
<add-task label="Learn Polymer" detail="http://www.polymer-project.org/"></add-task>
<add-task label="Build something great" detail="create polymer element"></add-task>
</task-list>
Screenshots
With detailed and editable attributes
Without detailed and editable attributes