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>

这会导致错误：

未捕获的TypeError：无法设置属性＆＃39; model＆＃39;未定义的

选择和建模模型的最佳方法是什么？＃34; modelstemplate＆＃34;传入数组？

我是否需要分别对其周围的模板进行建模（＆＃34; menutemp＆＃34;）？

Answer 1

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

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

因此，当您说dom-if和paper-radio-button绑定到likesCars并且dom-repeat绑定到models时，他们会受到约束到this.likesCars和this.models。

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

这里＆＃39; sa jsbin有一个基于您的代码的工作示例，我也添加了selectedMake属性，以便您可以根据选择的内容实际设置不同的数组到第二个菜单第一个菜单。

我希望这有帮助

模板内的聚合物建模模板

1 个答案: