模板内的聚合物建模模板答案

【问题标题】：Polymer modeling template within template模板内的聚合物建模模板
【发布时间】：2015-10-14 04:53:32
【问题描述】：

我正在尝试在 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>

这会导致错误：

未捕获的类型错误：无法设置未定义的属性“模型”

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

我需要单独围绕它（“menutemp”）建模模板吗？

【问题讨论】：

标签： javascript polymer web-component

【解决方案1】：

我认为你误解了 Polymer 的数据绑定是如何工作的。

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

所以当你说你的dom-if 和你的paper-radio-button 绑定到likesCars 并且dom-repeat 绑定到models 他们绑定到this.likesCars 和this.models。

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

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

希望对你有帮助

【讨论】：