使用核心选择器的聚合物 - 如何使用数组设置选定的值

时间:2022-10-28 16:06:30

I am using polymer 0.5 and specificly the core-selector element:

我使用聚合物0.5,特别是核心选择器元素:

<core-selector multi valueattr="label" id="specialisms" layout horizontal wrap around-justified>
    <div class="item core-selected" label="label1" active>Boo</div>
            <div class="item core-selected" label="label1" active>Baa</div>
            <div class="item" label="label1">Cow</div>
</core-selector>

How can i give multiple selected values with an array? What is the best way of doing this?

如何使用数组给出多个选定值?这样做的最佳方式是什么?

Is it possible to give the keys in like this:

是否可以像这样给出键:

selected="['key1','key2','key3']"

Thanks in advance

提前致谢

1 个解决方案

#1


Use a multi-selection

使用多项选择

HTML

<core-selector selected="{{multiSelected}}" multi>
    <div>Item 0</div>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</core-selector>

Javascript

Polymer({
    ready: function() {
        this.multiSelected = [0,1,2];
    }
});

or when you're not working in a custom element

或者当你不在自定义元素中工作时

<script>
    document.addEventListener('polymer-ready', function(e) {
        var tmp = document.querySelector('#template');
        tmp.multiSelected = [0,1,2];
    });
</script>

The selected attribute takes an array of numerical indexes

selected属性采用数字索引数组

Taken from the core-selector demo

取自核心选择器演示

#1


Use a multi-selection

使用多项选择

HTML

<core-selector selected="{{multiSelected}}" multi>
    <div>Item 0</div>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</core-selector>

Javascript

Polymer({
    ready: function() {
        this.multiSelected = [0,1,2];
    }
});

or when you're not working in a custom element

或者当你不在自定义元素中工作时

<script>
    document.addEventListener('polymer-ready', function(e) {
        var tmp = document.querySelector('#template');
        tmp.multiSelected = [0,1,2];
    });
</script>

The selected attribute takes an array of numerical indexes

selected属性采用数字索引数组

Taken from the core-selector demo

取自核心选择器演示