https://github.com/trakkasure/dom-bindref

Polymer 1.x element that allows including references to other templates by ID.
https://github.com/trakkasure/dom-bindref

Last synced: 16 days ago
JSON representation

Polymer 1.x element that allows including references to other templates by ID.

• Host: GitHub
• URL: https://github.com/trakkasure/dom-bindref
• Owner: Trakkasure
• Created: 2015-07-29T02:42:10.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-01T17:12:34.000Z (over 9 years ago)
• Last Synced: 2024-10-11T01:13:20.679Z (3 months ago)
• Language: HTML
• Size: 195 KB
• Stars: 4
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Polymer tag for template reference placement.

Simply put, it is like the "ref" attribute of the template tag from Polymer 0.5. It tries to place content from a template, possibly loaded in a different file, in the place of this tag.  It then attempts to bind properties from this and the parent template into the variable bindings in that referenced template.

## Install

```

$ bower install dom-bindref

```

## Example:

This is contrived and could be easily be implemented with another variable, but it's a dirt simple example.

I've also typed this in without testing.

```

    Howdy {{arriving-person}}

    Goodbye {{departing-person}}

    

        

            Say Goodbye.

        

        

            

        

    

    

        var app = document.querySelector("#app");

        app.set('ref','ref1');

        app.changeRef=function() {

            app.set("ref","ref2");

        };

        window.addEventListener('WebComponentsReady',function() {

            app.set('arriving-person',"new guy");

            app.set('departing-person',"old guy!");

        });

    

```

## Not much better Example

This is a better example where you can create a simple list.

I've also typed all of this this in without testing.

```

    

    

        

    

    

        var app = document.querySelector("#app");

        app.showReports=function(e) {

            var model=e.model;

            // do more stuff.

        };

        window.addEventListener('WebComponentsReady',function() {

            // Populate the iron-list items array (app.data)

            app.set('data',[

                {id:1,type:"manager",fullName:"John Smith",org:"IT",reports:[2,3,4,5]},

                {id:2,type:"person",fullName:"Jane Doe"},

                {id:3,type:"person",fullName:"Bob Zane"},

                {id:4,type:"person",fullName:"Gillian Franklin"},

                {id:5,type:"person",fullName:"Paul Keebler"}

            ]);

        });

        

```

This is the list-item-types.html file. It could be included anywhere, but it must be a link somewhere.

```

    <template id="person">

        <paper-item-body two-line class="layout vertical regular-person">

            <div>

                <iron-icon icon$="[[iconForType(item.type)]]"></iron-icon>

                <div class="name">{{item.fullName}}</div>

            </div>

            <div secondary>A regular user</div>

        </paper-item-body>

    </template>

    <template id="manager">

        <paper-item-body two-line class="layout vertical manager">

            <div class="layout horizontal">

                <iron-icon icon$="[[iconForType(item.type)]]"></iron-icon>

                <div class="flex" class="name">{{item.fullName}}</div>

                <div class="control"><paper-button raised on-click="showReports">-&gt;</paper-button></div>

            </div>

            <div secondary>

                <div>Manager of <span>{{item.org}}</span></div>

                <div>with <span>{{items.reports.length}}</span direct reports.</div>

            </div>

        </paper-item-body>

    </template>

```

# TODO

I am in process of creating tests. So some things might be broken in browsers other than chrome.