Question

我正在构建一个自定义元素来读取给定目录中的文件（例如来自/ config目录的ini文件），并将它们显示为包含在核心选择器中的列表。然后，用户可以从列表中选择文件。一切正常，但阅读所选数据似乎很笨拙。相关代码是：

<div>
        <core-selector on-core-activate={{getFileSelected}} selected="">
            <template repeat="{{file in files}}">

                <rnc-commandfilelist>
                    <span class="rnc-fileindex">{{file.index}}</span>
                    <span class="rnc-filename">{{file.commandFileName}}</span>
                </rnc-commandfilelist>

            </template>
        </core-selector>
    </div>

</template>

<script>
    Polymer('rnc-getscaffoldini', {
        matchstring: ".ini",
        configurationdirectory: "configuration",

        getFileSelected: function (e, detail, sender) {
            var fileSelected = detail.item.children[1].innerText;
            console.log(fileSelected);

            var fullPath = this.configurationdirectory + "/" + fileSelected;

            this.setAttribute('selectedfilename', fileSelected);
            this.setAttribute('selectedfullpathname', fullPath);
        }
    });

</script>

代码行：

var fileSelected = detail.item.children[1].innerText;

获取所选文件名即可。有没有更好的方法来获取所选数据字段？

Answer 1

selectedModel发布的core-selector属性是指所选数据模型。这里的重复语法repeat="{{file in files}}">表示每个项目都有一个包含范围数据的数据模型以及一个名为file的属性。这意味着对于每个项目，所选文件将作为selectedModel.file存储在选择器中。您可以使用绑定来访问数据。

所以，如果你这样做：

<core-selector selectedModel="{{selectedModel}}">

然后你可以：

selectedModelChanged: function() {
  // this.selectedModel.file refers to the particular file that is selected
}

-

Fwiw，你也可以用这种方式构建它：

<template repeat="{{files}}">
  <rnc-commandfilelist>
    <span class="rnc-fileindex">{{index}}</span>

由于重复语法不同，现在数据模型只是文件记录，所以：

<core-selector selectedModel="{{selectedFile}}">

然后你可以：

selectedFileChanged: function() {
  // this.selectedFile refers to the particular file that is selected
}

http://jsbin.com/putecu/1/edit

聚合物核心选择器 - 使用选定的数据

1 个答案: