javascript - 模板内的 polymer 建模模板

Question

我正在尝试在 Polymer 中创建下拉选择(如果选择单选按钮则出现)，这会触发另一个下拉选择 on-iron-select。

所有这些都位于父模板中:

<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>

一旦铁选择发生，我的 polymer 脚本是:

    <script>

      Polymer({
        is:"likes-cars",

        modelfunc: function() {
          this.$.menutemp.model={}
          this.$.modelstemplate.model={models:["Model 1","Model 2"]}

        }
      });

    </script>

这会导致错误:

Uncaught TypeError: Cannot set property 'model' of undefined

使用传入的数组选择和建模“modelstemplate”的最佳方法是什么？

我需要单独围绕它(“menutemp”)对模板进行建模吗？

Answer 1

我认为您有点误解了 Polymer 数据绑定(bind)的工作原理。

当您在自定义元素中使用 [[property]] 或 {{property}} 表示法绑定(bind)到某些内容时，您将绑定(bind)到自定义元素的属性，无论您在调用 Polymer() 函数时是否实际定义了属性。

因此，当您说您的 dom-if 和 paper-radio-button 绑定(bind)到 likesCars 并且 dom -repeat 绑定(bind)到 models，它们绑定(bind)到 this.likesCars 和 this.models。

因此，您在 modelfunc 函数中所需要做的就是将 this.models 设置为要显示为第二个菜单项的字符串数组。考虑到这一点，包围第二个菜单的模板实际上是不必要的。

这是一个jsbin通过基于您的代码的工作示例，我还添加了一个 selectedMake 属性，以便您实际上可以根据第一个菜单上选择的内容为第二个菜单设置不同的数组。

我希望这有帮助