CODEWITHSUNDEEP
polymer
HamptonNorth
HamptonNorth

Reputation: 559

Polymer core-selector - using the selected data

I am building a custom element to read files in a given directory (e.g. ini files from a /config directory) and display them as a list wrapped in a core-selector. The user can then select a file from the list. All works fine except reading the selected data seems clumsy. The relevant code is:

<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>

The code line:

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

gets the selected file name okay. Is there a better way of getting the selected data fields back?

Upvotes: 0

Views: 920

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

The selectedModel property published by core-selector refers to the selected data model. The repeat syntax here repeat="{{file in files}}"> means that each item has a data model that contains the scope data plus a property called file. That means for each item, the selected file is stored in the selector as selectedModel.file. You can use binding to access the data.

So, if you do:

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

then you can have:

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

--

Fwiw, you could also structure it this way:

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

Because of the different repeat syntax, now the data model is simply the file record, so:

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

then you can have:

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

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

Upvotes: 2

Related Questions