I have the following partial:
<template is="dom-repeat" repeat="{{myItems}}">
One: <paper-input type="number" value="{{myValue1}}"></paper-input>
Two: <paper-input type="number" value="{{myValue2}}"></paper-input>
Three: <paper-input type="number" value="{{myValue3}}"></paper-input>
<template is="dom-if" if="[[_show(myValue1)]]">
Four: <paper-input value="{{myValue4}}></paper-input>
</template>
</tempalte>
myItems is an array with 4 elements, so, I can see 12 paper-inputs.
The problem is when I enter some text into first paper-input, the text appears into others paper-inputs (the firsts of each iteration).
Is there any way to bind different variables into dom-repeat template?
EDITED to use indices/ordinals instead of array values:
<template is="dom-repeat"
items="{{myItems}}" as="item">
One: <paper-input type="number" value="{{item.1}}"></paper-input>
Two: <paper-input type="number" value="{{item.2}}"></paper-input>
Three: <paper-input type="number" value="{{item.3}}"></paper-input>
<template is="dom-if"
if="[[_show(item.1)]]">
Four: <paper-input value="{{item.4}}></paper-input>
</template>
</template>
Related
I am passing treeselect component as a slot as below.
<template v-slot:filters>
<treeselect v-model="value" :options="filterTreeData" />
</template>
My slot are placed as below.
<div class="rule-filter-container">
<slot name="filters"></slot>
</div>
<div class="rule-operator-container">
<el-select
v-if="treeSelect.selectedValue.dataType !== dataType.Checkbox && treeSelect.selectedValue.dataType !== dataType.Radio"
v-model="value"
filterable
placeholder="Type Or Select">
</el-select>
</div>
As in above I have written v-if condition for the sake of example.
It is not working as of now. But I want to access treeSelect's selected value. and based on that I want to keep or remove "el-select" component.
So how do I access that selected value of treeselect in child component which is passed as a slot?
You should be able to bind the slot's value to the component.
<template v-slot:filters :slotValue="value">
<treeselect v-model="value" :options="filterTreeData" />
</template>
And in the component:
<div class="rule-filter-container">
<slot name="filters"></slot>
</div>
<div class="rule-operator-container">
<el-select
v-if="slotValue !== dataType.Checkbox && slotValue !== dataType.Radio"
v-model="value"
filterable
placeholder="Type Or Select">
</el-select>
</div>
I was wondering what is the best way to submit a form(iron-form) with the following structure:
Basic Polymer iron-form (starting point):
<form is="iron-form" method="post" action="/" id="basic">
<template is="dom-repeat" id="addresses" items="[[addresses]]">
<paper-input name="city" label="City" value="[[item.city]]"></paper-input>
<paper-input name="street" label="Street" value="[[item.street]]"></paper-input>
</template>
</form>
Target JSON payload structure after submit:
addresses: [
{ city: "X", street: "X" },
{ city: "Y", street: "Y" }
]
The way I am doing it now is using the dom-repeat's index and manually extending the payload at iron-form-presubmit phase. The idea behind this approach is coming from Spring-MVC where this is handled in a really neat way.
i.e.:
<form is="iron-form" method="post" action="/" id="basic">
<template is="dom-repeat" id="addresses" items="[[addresses]]">
<paper-input name="addresses[[[index]]].city" label="City" value="[[item.city]]"></paper-input>
<paper-input name="addresses[[[index]]].street" label="Street" value="[[item.street]]"></paper-input>
</template>
</form>
Thanks in advance!
I'm having trouble with the polymer in my elements here is my code:
<dom-module id="bb-account-settings">
<template>
<style is="custom-style" include="shared-styles"></style>
<div class="settings-dialog">
<div class="frame">
<div class="horizontal layout">
<div>
<div class="user-image"></div>
</div>
<div class="horizontal layout">
<paper-input label="First Name" value="{{fNameSet}}"></paper-input>
      
<paper-input label="Last Name" value="{{lNameSet}}"></paper-input>
</div>
<paper-input label="Email" value="{{emailSet}}"></paper-input>
</div>
<paper-input label="Phone number" value="{{phoneSet}}" allowed-pattern="[0-9]"></paper-input>
</div>
</div>
</template>
<script>
Polymer({
is: 'bb-account-settings'
});
</script>
<script>
this.lNameSet = 'test last name'
var userId = firebase.auth().currentUser.uid;
firebase.database().ref('/user/' + userId + '/UserInfo').once('value').then(function(snapshot) {
this.fNameSet = snapshot.val().fName;
});
</script>
</dom-module>
As you well think, the first name filed is supposed to be data from firebase and the last name - 'test last name'.
But non of this happens, it doesn't give and error, just doesn't put the fNameSet and lNameSet in place.
Thanks in advance.
How to handle multiple input values with same name in meteor and expect array from events.
<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
By far the easiest way to scope events in Blaze templates is to define templates at the level at which you need to trap events.
If you have:
<template name="companyEmails">
{{#each companyEmail}}
<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
{{/each}}
</template>
Then if you attach an event handler to the companyEmails template you have to figure out which input was changed.
If you change this pattern to:
<template name="companyEmails">
{{#each companyEmail}}
{{> oneCompanyEmail}}
{{/each}}
</template>
<template name="oneCompanyEmail">
<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
</template>
Then you can attach an event handler to the lower level template and be guaranteed that you're getting the correct event on the correct object with the appropriate data context:
Template.oneCompanyEmail.events({
'input #companyEmail': function(ev,err){
var emailAddress = ev.target.value;
console.log(this); // will be the value of companyEmail from the #each
}
});
As always in Meteor you're probably working in a Template scope and creating those inputs dynamically.
if that is the case you need to create an event handler for the input and then capture the concurrent used input using "this", here's an example:
html file:
<template name="emailForm">
{{#each item in items}}
<input name="email" class="email" placeholder="enter email address">
<button class="addEmail">+</button>
{{/each}}
</template>
in your js file:
if(Meteor.isClient) {
Template.emailForm.events({
'click .addEmail': function(event) {
console.log(this);
}
});
}
take a look at what's comes out with "this" and find out how to extract your desired bit of data as it will represent only the clicked item.
I have the following code:
<paper-menu selected="0" class="dropdown-content">
<paper-item name="KNJN">KNJN</paper-item>
<paper-item name="GREEN_VIRTEX5">GREEN_VIRTEX5</paper-item>
</paper-menu>
<paper-input type="number" value="{{ settings.someItem }}" label="Some item"></paper-input>
I need to bind this to Object like this:
{
someItem: Some number,
someOtherItem: Selected item as string goes there
}
I've tried to use drop-down-menu with selectedItemLabel binded to the Object but this hasn't worked for me:
<paper-dropdown-menu selectedItemLabel="{{settings.boardType}}">
<paper-menu class="dropdown-content">
<paper-item name="KNJN">KNJN</paper-item>
<paper-item name="GREEN_VIRTEX5">GREEN_VIRTEX5</paper-item>
</paper-menu>
</paper-dropdown-menu>
Also I don't know how to pre-select an item in dropdown-menu.
Try this... Since the menu uses the selectable behavior, you should be able to use attr-for-selected to set where the selected comes from:
<paper-menu selected="{{settings.someItem}}" attr-for-selected="name" class="dropdown-content">
<paper-item name="KNJN">KNJN</paper-item>
<paper-item name="GREEN_VIRTEX5">GREEN_VIRTEX5</paper-item>
</paper-menu>
<paper-input type="string" value="{{settings.someItem}}" label="Some item">
</paper-input>