I'm currently trying to map an array of strings I have to its corresponding object... but cannot find a way to do the map it.
I want to do something like this below (I know syntax is not correct, but trying to get my point across)
// user.connections ["1","2","3"]
<template is="dom-repeat" items="{{user.connections}}" as="connection"
map="isAppConnection" observe="app.id">
{{connection}} <!-- The actual object -->
</template>
Use computed bindings
<dom-module is="some-element">
<template is="dom-repeat" items="{{isAppConnection(user.connections)}}" as="connection">
{{connection}}
</template>
</dom-module>
<script>
Polymer({
is: "some-element",
properties: {user: Object},
isAppConnection: function(connections){
connections.map(e=>SomeObj[e])
},
})
</script>
Related
I got simplecomponent:
<template>
<v-chip>
<slot></slot>
</v-chip>
</template>
and I use it like that:
<formatted-date>2020-22-03</formatted-date>
how can I access the date given in the slot in the component?
If you need to manipulate the given data, use PROPS instead slots.
<template>
<v-chip>
{{ date }}
</v-chip>
</template>
<script>
...
props: ['date'],
...
</script>
And use it like that:
<formatted-date date="2020-22-03"></formatted-date>
This way you can access it using this.date inside the component.
Read more at: Official Docs - Props
In general doing a getElementById works pretty well like this :
console.log(document.getElementById('{{chart_id}}').setAttribute("id", "div_top2"));
But it returns me null and I don't really know why but I think it's becoming from the following lines:
<template name="chart">
<div id="{{chart_id}}"></div>
</template>
And later in the JS I do :
Template.currentData().chart_id
to get the div and place a HighChart here.
The thing I want to do is to rename the id (by the way I want to add a identifier so the final id would be something like <div id ="{{chart_id}}+ a random number">)
Then I could do this in my JavaScript:
Template.currentData().chart_id + theRandomNumber
Finally I have modified the HTML where I create the <div> and it looks like this :
{{#each gimmeContainersToCreateChart}}
{{> chart chart_id=this._id}}
<!-- {{> chart chart_id="cpuChart"}}
{{> chart chart_id="netChart"}}
{{> chart chart_id="diskChart"}} -->
{{/each}}
gimmeContainersToCreateChartreturns a cursor with the running&&paused containers from the collection
So I have a scenario:
<template is="dom-repeat" items="{{objects}}" as="o" filter="{{_filter(filter)}}">
...
<template is="dom-if" if="_isHidden" restamp>
foo
</template>
...
</template>
Now, the _filter function forces rerendering items under the dom-repeat every time my filter property changes (since it's observed by _filter. This is not the problem as it works properly, but the catch is that the _hidden function might return true or false based on another property (which could also change), and whenever the filter rerenders I need to force re-evaluation of _isHidden hence hide or show the contents of the dom-if template.
Anyone has an idea what could be my issue?
Thanks!
You have to also bind the _isHidden property:
<template is="dom-repeat" items="{{objects}}" as="o" filter="{{_filter(filter)}}">
...
<template is="dom-if" if="{{_isHidden}}" restamp>
foo
</template>
...
</template>
I'm trying to create dropdown select (appearing if radio button is selected) in Polymer, that triggers another dropdown select on-iron-select.
All of this lives within a parent template:
<dom-module id="likes-cars">
<template id="maintemplate">
<paper-radio-button checked="{{likesCars}}" id="thebutton">I like cars.</paper-radio-button>
<template is="dom-if" if="{{likesCars}}">
<paper-dropdown-menu label="Your favourite car make">
<paper-menu class="dropdown-content" on-iron-select="modelfunc">
<paper-item>Make 1</paper-item>
<paper-item>Make 2</paper-item>
</paper-menu>
</paper-dropdown-menu>
</template>
<template id="menutemp">
<paper-dropdown-menu label="Your favourite car model">
<paper-menu class="dropdown-content" >
<template is="dom-repeat" items="{{models}}"id="modelstemplate" >
<paper-item>{{item}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</template>
</template>
And my Polymer script once the iron-select occurs is:
<script>
Polymer({
is:"likes-cars",
modelfunc: function() {
this.$.menutemp.model={}
this.$.modelstemplate.model={models:["Model 1","Model 2"]}
}
});
</script>
This results in the error:
Uncaught TypeError: Cannot set property 'model' of undefined
What is the best way to select and model "modelstemplate" with an array passed in?
Do I need to model the template around it("menutemp") separately?
I think you're misunderstanding how Polymer's data binding works a bit.
When you bind to something using the [[property]] or the {{property}} notation in a custom element, you're binding to the custom element's properties, no matter if you actually define the properties when calling the Polymer() function.
So when you say your dom-if and your paper-radio-button are bound to likesCars and that the dom-repeat is bound to models they're bound to this.likesCars and this.models.
So all you need to do in your modelfunc function is to set this.models to an array of Strings you want to show as items for the second menu. With this considered, the template enveloping the second menu is actually unnecessary.
Here's a jsbin with a working example based on your code, I added a selectedMake property too so that you can actually set different arrays to the second menu depending on what was selected on the first menu.
I hope this helped
I have two custom elements. student-details.html and student-service.html
student-details.html looks like this
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="student-service.html">
<dom-module id="student-details">
<style>
</style>
<template>
<h1>Student Details</h1>
<h1>{{studentId}}<h1> //This value is printed properly
<student-service user-data={{studentId}} service-name="StudentDetails" response-data={{responseData}} ></student-service>
<h1>{{responseData.name}}</h1>
<img width="70" height="70" src="{{responseData.image}}" />
<h1>{{responseData.qualification}}</h1>
<h1>{{responseData.speciality}}</h1>
<h1>{{responseData.phone}}</h1>
<h1>{{responseData.email}}</h1>
<template is="dom-repeat" items="{{responseData.addresses}}">
<h1>{{item.street}}</h1>
<h1>{{item.area}}</h1>
</template>
</template>
<script>
Polymer({
is:'student-details',
properties:{
studentId: String,
notify: true
}
});
</script>
</dom-module>
the student-service takes input as studentId and returns a response in responseData.
If I access the value studentId in the student-details.html itself using {{studentId}} it displays, but I am not able to send the same value to user-data input in student-service element.
Note: If I hardcode the studentId, it works well.
I think I am not following the proper way of passing value. Kindly suggest
Feel free to use iron-ajax
Using polymer ajax response
https://elements.polymer-project.org/elements/iron-ajax
I hope you can help.
You missed the quotes around {{studentId}}
Try:
<student-service user-data="{{studentId}}" service-name="StudentDetails" response-data="{{responseData}}"></student-service>
You can try using <student-service user-data$="{{studentId}}" similar to this post.
The code does not look wrong. It could well be that the student-service is being called before the studentId is set.
Try to see the flow of your code and make sure, the service is only called after the studentId is set.