Style two-way data binding problem

by Tomek

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="tomalec-sortable-list" attributes="order">
    <template>
        <content></content> <strong>order: {{order}}</strong>

        <button id="test" draggable="true">Change to 'Tomek'</button>
    </template>
    <script>
        Polymer('tomalec-sortable-list', {
            order: "",

            dragged: null,

            ready: function() {
                var self = this;
                this.$.test.addEventListener("dragstart", function() {
                    self.order += " i dupa";
                });
                this.children[1].draggable;
                this.children[1].addEventListener("dragstart", function() {
                    self.order += " i pupa";
                });
                this.makeDraggable();
            },
            makeDraggable: function() {
                //d console.info("makeDraggable", this, arguments)
                //debugger
                var listItems, len, currentItem;
                //debugger
                listItems = this.children;
                len = listItems.length;
                //TODO: rewrite it to mutation observer, so it will work also for items added in fly.
                while (len--) {
                    currentItem = listItems[len];
                    this.order[len] || (this.order[len] = len);
                    currentItem.style.order = this.order[len] || len;
                    //debugger
                    //currentItem.draggable = (listItems[len].getAttribute("sortable")!=="false");
                    if (listItems[len].getAttribute("sortable") !== "false") {
                        currentItem.draggable = true;
                        currentItem.addEventListener('dragstart', this.dragStart.bind(this), false);
                        currentItem.addEventListener('dragenter', this.dragEnter.bind(this), false);
           ...

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
}

JavaScript

document.querySelector('#exampleAppTmpl').model = {
    order: "123"
};

document.body.addEventListener('click', function (ev) {
    if (ev.target.id == "btn") {
        document.querySelector('tomalec-sortable-list').setAttribute('order', "321");
    }
});