带有预加载值的双向绑定

two-way binding with preloaded value

本文关键字：绑定 加载      更新时间：2023-09-26

我在金字塔/jinja2项目中使用activejs，我想知道，如果有可能有一个输入元素的被动双向绑定，初始值加载服务器端模板

例如，我有这样一个元素:

<input name="name">

如果我在jinja2(服务器端)模板中使用{{}}分隔符，在activejs中使用[[]]分隔符，我可以使用

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

或:

<!-- 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 ]]">

现在我想做的是，将这两种情况结合起来:将输入与activejs数据绑定，但从服务器端模板获取初始值。

如果不创建<标记在服务器端模板?>

编辑:

目前，我只是复制输入，第二个副本是双向绑定和隐藏的，可见副本是只读的(然后如果我需要编辑，我交换它们)。

我想我可以写一个设置初始值的装饰器，但是当我需要一个"真正的"装饰器(比如，使用select2插件)时，它仍然会产生问题

我不熟悉jinja2，但尝试使用Ractive双向绑定，并使用jinja2将服务器端值"绑定"到Ractive数据定义。

<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>
相关文章：