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

Question

我的项目中有一iron-form件事要做CRUD.除了一个问题之外,这很有效.

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

该selected属性paper-menu并没有帮助,因为基于的价值它的指数为基础的,而不是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双向数据绑定'因为它是只读的.

相反,你应该使用selected在paper-menu这样的-

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

请注意,您需要指定attr-for-selected告诉selected属性使用哪个属性进行选择.您还需要selectedValue在元素中创建属性以selected通过绑定更新属性.

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

因此ready,我将其设置为attached- 而不是将其设置为-

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

这次它有效.