finom/seemple

Server side rendered data?

Closed this issue · 1 comments

How can keep the initial state of a bound node till it is actively changed? Take the example of data that has been rendered in my templates from the Backend/ Server.

Using your example:

<input type="text" class="my-input"><br>
<span class="my-span">Server side data</span> <----- This value disappears
var Application = Class({
    'extends': Matreshka,
    constructor: function () {

        // bind the property x and the text field
        this.bindNode('x', '.my-input');

        // bind the property x and the ".my-output" block
        this.bindNode('x', '.my-span', {
            setValue: function (v) {
                this.innerHTML = v;
            }
        });

        // if the property "х" has changed,
        // inform about it in the console
        this.on('change:x', function () {
            console.log('x changed to ' + this.x);
        });
    }
});

var app = new Application();

The value rendered by the server in the spane is removed. It should stay till it is actively changed.
Thanks

finom commented

@kokujin thanks for your activity. This place is used for issue/bug reporting. For general questions welcome to the forum.

Answering your question:

 // bind the property x and the ".my-output" block
        this.bindNode('x', '.my-span', {
            setValue: function (v) {
                this.innerHTML = v;
            }
        });

This code doesn't know how to retrieve data from .my-span. It knows only how to set data.

You need to define getValue property for the binder:

 // bind the property x and the ".my-output" block
        this.bindNode('x', '.my-span', {
            setValue: function (v) {
                this.innerHTML = v;
            },
            getValue: function() {
                return this.innerHTML;        
            }
        });

To make the code less messy and use some hacks for innerHTML behavior in Internet Explorer 8, use html binder.

Your code will look like this:

this.bindNode('x', '.my-span', MK.binders.html());

As a "bonus", in case if you want to restore MK.Array from prerendered collection use this guy