Question

尝试从<select>模板（Dart 1.17.1 + Polymer 1.0.0-rc.15）中的<dom-repeat>元素获取更改后的值时遇到问题。我的代码如下：

HTML， shop.html

<template is="dom-repeat" items="[[shop.itemList]]">
    <div class="md-row">
    <div class="md-cell">[[item.name]]</div>
    <div class="md-cell"><input type="text" is="iron-input" name="quantity" bind-value="{{item.quantity}}" size="20" maxlength="20"></div>
    <div class="md-cell">
    <select name="size" selectedIndex="{{item.selected}}" value="{{item.itemSize}}" on-tap="changeSize" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</template>

Dart， shop.dart

@PolymerRegister('shop')
class Shop extends PolymerElement {

    @Property(notify: true)
    List<ShopItem> itemList = [];

    @reflectable
    changeSize(event, detail) {
        var model = new DomRepeatModel.fromEvent(event);

        print('Change Size');
        print(model.item.itemSize);
    }

    Shop.created() : super.created();

    ready() {
        set("itemList", [new ShopItem(name: "Milk"), new ShopItem(name: "Butter")]);
    }
}


class ShopItem extends JsProxy {
    @reflectable String id;
    @reflectable String name;
    @reflectable num quantity;

    String _itemSize = '2';

    @reflectable
    String get itemSize => _itemSize;

    void set itemSize(String s) {
        _itemSize = s;

        print("Changed Size " + _itemSize);
    }

    num _selected = 3;

    @reflectable
    num get selected => _selected;

    void set selected(num s) {
        _selected = s;

        print("Changed selected" + _selected.toString());
    }
}

从size元素中选择<select>时，所选值不会更新模型。因此，对changeSize()的调用始终具有相同的值。有人对如何解决这个问题有任何建议吗？

Answer 1

通过将::change添加到select元素，解决了问题，如下所示。

<select name="size" value="{{item.itemSize::change}}" on-tap="changeSize" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

显然需要::change来触发更新模型的事件。显示默认值时不需要selectedIndex属性。

如何在Dart中的dom-repeat模板中选择选项？

1 个答案: