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

Question

我愿意

• 使用 core-list-dart 显示列表
• 当我点击列表中的一个元素时显示一个模式（paper-action-dialog）

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

代码如下：

    <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 中找到第一个“paper-action-dialog”（只要您不向下滚动且项目未虚拟化，它就是第一个项目）并显示它。

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

<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();