About Mixin Templated

Mixin templated

Example

<link rel="import" href="../../src/x-mixin-templated.html">
<link rel="import" href="./test-input.html">

<script type="text/template">
    <fieldset>
        <legend x-property="header">default header</legend>
        <div x-content></div>
        <footer x-property="footer">
            default footer
            <input is="test-input" />
            <input type="submit" />
        </footer>
    </fieldset>
</script>

<script type="text/javascript">
    (function(global) {

        var owner =
            document._currentScript ? document._currentScript.ownerDocument : document.currentScript.ownerDocument;
        var tpl = owner.querySelector('script').innerHTML;

        global.TestContainer = xtag.register('test-container', {
            mixins: ['templated'],
            lifecycle: {
                created: function() {
                    console.log('%s created', this.tagName);
                    this.applyTemplate(tpl);
                },
                inserted: function() {
                    console.log('%s inserted', this.tagName);
                },
                removed: function() {
                    console.log('%s removed', this.tagName);
                }
            },
            accessors: {
                headerTitle: {
                    attribute: {
                        name: 'header-title'
                    },
                    set: function  (v) {
                       this.xtag.header.innerHTML = v;
                    }
                },
                footerNote: {
                    attribute: {
                        name: 'footer-note'
                    },
                    set: function  (v) {
                       this.xtag.footer.innerHTML = v;
                    }
                }
            }
        });

    }(this));
</script>

Download it

bower install x-mixin-templated

Dev Setup

Fork this repo, rename it, then clone it.

$ npm install    // install bower tasks
$ bower install    // install components
$ grunt build   // build
$ grunt bump-push  // bump the version number, tag it and push to origin master

Links

Yeoman X-Tag Generator

X-Tags Docs

Guide for creating X-Tag Components

Using X-Tag components in your applications