将下拉菜单绑定到动态对象属性

时间:2018-09-06 06:25:13

标签: polymer-1.0

为了保存和设置选择,我一直在努力将下拉菜单选择绑定到对象的动态属性。

因此,我有一个节标题列表(i的列表),其中每个标题都有一个问题列表(j的列表),每个问题都有一个答案,该答案保存为文本,但可以是列表(opt或list of)。选择)。

这是我当前代码的结构。

<template is="dom-repeat" items="{{dataArray}}" as="dataItem" index-as="sectionIndex">
    <div>
        <h4>[[dataItem.name]]</h4>

        <div id="[[dataItem.id]]">
            <div>
                <template id="questionList" is="dom-repeat" items="{{dataItem.questions}}" as="questionItem" index-as="questionIndex">
                    <div>
                        <!-- Label -->
                        <div>[[questionItem.question]]</div>
                        <!-- Control -->
                        <div>
                            <template is="dom-if" if="[[_isEqual(questionItem.fieldType, 'NumericInput')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(questionItem.fieldType, 'TextInput')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(questionItem.fieldType, 'TextArea')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(questionItem.fieldType, 'MoneyInput')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(questionItem.fieldType, 'CheckBox')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(questionItem.fieldType, 'Select')]]">
                                <paper-dropdown-menu-light" vertical-offset="60">
                                    <paper-listbox class="dropdown-content" attr-for-selected="option" on-selected-item-changed="_selectedOptionChanged">
                                        <paper-item d-section-index$="[[sectionIndex]]" d-question-index$="[[questionIndex]]" d-option-index$="-1" option="ns">No Selection</paper-item>
                                        <template id="optionList" is="dom-repeat" items="[[questionItem.selectableOptions]]" as="optionItem" index-as="optionIndex">
                                            <paper-item d-section-index$="[[sectionIndex]]" d-question-index$="[[questionIndex]]" d-option-index$="[[optionIndex]]" option$="[[optionItem]]">[[optionItem]]</paper-item>
                                        </template>
                                    </paper-listbox>
                                </paper-dropdown-menu-light>
                            </template>
                            <template is="dom-if" if="[[_isEqual(item.fieldType, 'Label')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(item.fieldType, 'DateTimePicker')]]">
                            </template>
                            <template is="dom-if" if="[[_isEqual(item.fieldType, 'MultiSelect')]]">
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

我通常要做的是在paper-listbox下,我可以将selected属性设置为对象属性,例如selections.A1。现在的问题是我不知道结构,因为不同的环境对于它们的部分,问题和选项会有不同的金额。

我的动态对象遵循以下几行内容,它是在接收数据时动态建立的,并且在聚合物元素的属性中声明时未初始化。

dataSelections
{
    //i-j: opt
    "0-0": null,
    "0-1": null,
    "0-2": null,
    "1-0": null,
    "2-0": null,
    ...
}

在Polymer中,我有一个临时解决方案,在此解决方案中,我可以获取当前的选择:

_selectedOptionChanged: function (event)
{
    var selectedOption = event.currentTarget.selectedItem;

    var sectionIndex = selectedOption.getAttribute("d-section-index");
    var questionIndex = selectedOption.getAttribute("d-question-index");
    var optionIndex = selectedOption.getAttribute("d-option-index");

    var section = this.dataArray[sectionIndex];
    var question = section.questions[questionIndex];
    var option = question.selectableOptions[optionIndex];

    this.dataSelections[sectionIndex + "-" + questionIndex] = option;
}

我现在正坐在一个我不知道如何将值设置为已保存值的问题上。 我尝试以下添加selected属性,但是它不起作用。我对此并不感到惊讶,但我希望通过这种方式将选项绑定到对象的属性。

selected="{{'dataSelections.' + sectionIndex + '-' + questionIndex}}"

有没有一种方法可以动态绑定paper-listbox的{​​{1}}属性,就像我需要根据以前的索引建立每个选定的索引一样?

0 个答案:

没有答案
相关问题