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