Question

我想

显示core-list-dart列表
当我点击列表中的元素时显示模态（纸张动作对话框）

模式将保存表单字段，以便更新所选的列表项。我现在所拥有的是显示不良信息的模态，例如，如果您单击列表中的第二项，则它是模态中显示的第一项的信息

以下是代码：

    <core-list-dart data="{{data}}">
        <template>
            <div>
                <div on-click="{{showModal}}">{{model.name}}</div>
                <paper-action-dialog heading="edit exercise: {{model.name}}" backdrop autoCloseDisabled>
                    <paper-input label="name" floatingLabel></paper-input>

                    <paper-button dismissive>Cancel</paper-button>
                    <paper-button on-click="{{updateExercise}}" data-ex-id="{{index}}" affirmative>Ok</paper-button>
                </paper-action-dialog>
            </div>
        </template>
    </core-list-dart>

和飞镖码

    @CustomTag('exercise-list')
    class ExerciseList extends PolymerElement {
        @observable ObservableList data;
        ExerciseList.created() : super.created();
        // lifecycle method
        void ready() {
            data = toObservable([new Person('Bob'), new Person('Tim')]);
        }
        showModal(event, detail, target){
            shadowRoot.querySelector('paper-action-dialog').toggle();
        }
        updateExercise(event, detail, target){
            String id = target.dataset['ex-id'];
            print(id);
        }
    }

    class Person extends Observable {
        // mandatory field
        @observable int index;
        // mandatory field
        @observable bool selected;
        //model
        @observable String name;
        Person(this.name);
    }

如何绑定好的信息？谢谢！

Complete Code here

Answer 1

shadowRoot.querySelector('paper-action-dialog').toggle();

在exercise-list中找到第一个“纸张操作对话框”（只要您不向下滚动且项目未虚拟化，这是第一个项目）并显示它。

解决方案可能是在对话框上创建一个属性，并绑定索引。

<core-list-dart data="{{data}}">
  <template>
    <div index="{{index}}">
    <div index="{{index}}" on-click="{{showModal}}">{{model.name}}</div>
      <paper-action-dialog heading="edit exercise: {{model.name}}" backdrop autoCloseDisabled>
        <paper-input label="name" floatingLabel></paper-input>
        <paper-button dismissive>Cancel</paper-button>
        <paper-button on-click="{{updateExercise}}" data-ex-id="{{index}}" affirmative>Ok</paper-button>
      </paper-action-dialog>
    </div>
  </template>
</core-list-dart>

并将您的代码更改为

var index = target.attributes['index'];
shadowRoot.querySelector('div[index="$index"] paper-action-dialog').toggle();

如何使用core-list-dart与paper-action-dialog

1 个答案: