CODEWITHSUNDEEP
javascriptpolymerweb-component
user3662883
user3662883

Reputation: 11

Polymer modeling template within 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?

Upvotes: 0

Views: 227

Answers (1)

Alan D&#225;valos
Alan D&#225;valos

Reputation: 2698

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

Upvotes: 1

Related Questions