two-way binding with preloaded value

Question

I'm using ractivejs in pyramid/jinja2 project, and I was wondering, if it's possible to have ractive two-way binding of an input element, with initial value loaded with server-side template.

For example, I have this element:

<input name="name">

If I'm using {{ }} delimiters for jinja2 (server-side) template, and [[ ]] delimiters for ractivejs, I can either do

<!-- This will have initial value taken from server,
     but with no binding to ractivejs -->
<input name="name" value="{{ name }}">

or:

<!-- This will be two-way binded with ractivejs data,
     but it's initial value needs to be defined in javascript -->
<input name="name" value="[[ name ]]">

Now what I'd like to do, is to join these two cases: have input binded with ractivejs data, but taking initial value from server-side template.

Would this be possible without creating < script > tag in server-side template?

EDIT:

At the moment, I just duplicate the input, with second copy being two-way binded and hidden, and visible copy being readonly (then if I need to edit, I'm swapping them).

I think I could write a decorator that sets the initial value, but it would still create problems when I need a "real" decorator (say, to use select2 plugin)

Answer 1

I'm not familiar with jinja2 but try to use Ractive two-way binding and use jinja2 to "bind" the server-side value to the Ractive data definition.

<div id="output"></div>
<script id="template" type="text/html">
    <input name="name" value="[[ name ]]">
</script>
<script type="text/javascript">
    new Ractive({
        template: "#template",
        el: "#output",
        delimiters: [ '[[', ']]' ],
        data: {
            name: "{{ name }}"   // the 'name' value from jinja2 gets copied to Ractive
        }
    });
</script>