javascript - 如何从模型数据中预选纸张下拉菜单中的纸张项目？

Question

我有一个iron-form 可以在我的项目中执行CRUD。这很好用，除了一个问题。

如何让 paper-dropdown-menu 显示模型数据的值？ (即:从我的模型数据中预选与 [[o.id]] 值对应的 paper-item)

paper-menu 的 selected 属性没有帮助，因为它是基于索引的，而不是基于 paper-item 的值.

表单代码如下:

<form is="iron-form" id="itemForm" method="post" action="/api/item/edit">

    <input is="iron-input" name="id" type="hidden" value="{{item.id}}">

    <paper-dropdown-menu label="Title" selected-item="{{selectedTitle}}">
        <paper-menu class="dropdown-content">
            <template is="dom-repeat" items="{{titles}}" as="o">
                <paper-item value="[[o.id]]">[[o.name]]</paper-item>
            </template>
        </paper-menu>
    </paper-dropdown-menu>
    <input is="iron-input" name="title" type="hidden" value$="[[selectedTitle.value]]">

    <paper-input name="firstName" label="First name" value="{{item.firstName}}"></paper-input>

    <paper-button raised onclick="document.getElementById('itemForm').submit()">Save</paper-button>
</form>

Answer 1

首先，您不能使用selected-item 进行双向数据绑定(bind)，因为它只读。

相反，您应该像这样在 paper-menu 上使用 selected -

<paper-menu id="menu" class="dropdown-content" selected="{{selectedValue}}" attr-for-selected="value">

请注意，您需要指定 attr-for-selected 以告知 selected 属性使用哪个属性进行选择。您还需要在元素中创建一个 selectedValue 属性，以通过绑定(bind)更新 selected 属性。

最初，我在 Polymer 的 ready 函数中指定了 selectedValue 属性，但它不起作用。我怀疑这可能是因为 selected 属性设置得太早，在呈现重复模板之前。

所以我没有将它设置在 ready 中，而是将其设置在 attached -

attached: function () {
  this.async(function () {
    this.selectedValue = 1;
  });
}

而这一次 it有效。