Javascript 带表达式的实用双向数据绑定

我希望有一个

输入

表示基本值（字符串、数字）列表，这样您就可以将它们作为逗号分隔的值输入，但将模型更新为数组：

"Transforms": [
        {
            "Fn": "TheFunctionName",
            "Args": [ "arg1", 2, "arg3" ]
        },
        {
            "Fn": "AnotherMethod",
            "Args": [ 4.678 ]
        },
    ]

将通过以下方式进行管理：

{{#each Transforms:i}}
   <li>
       <input value="{{Fn}}" placeholder="Function Name" />
       <input value="{{implode(Args)}}" placeholder="Function Arguments" />
   </li>
{{/each}}

{{#每个变换：i}


{{/每个}}

并将呈现如下内容：

*[函数名][“arg1”，2，“arg3”]
*[AnotherMethod][4.678]

主要是为了使我不需要找到一个好的UI来动态添加/删除参数输入（比如绑定某些按键，使用按钮添加/删除字段等等）

---

我可以使用“占位符”属性进行数据绑定，并且可能会观察到它来更新实际的属性，但是在“序列化”基础模型时，我需要过滤掉它。看起来我可以使用，它有一个getter和setter，但是从文档中不清楚它是如何与列表中的嵌套属性一起工作的（也就是说，

数据中有许多项与
转换
列表一起工作）。
这里的诀窍是不使用双向绑定，而是使用更传统的事件处理技术。此示例侦听第二次输入的
change
事件（不是每次击键时发生的
input
事件，因为这会导致光标在用户仍在键入时四处跳跃），并尝试评估其内容。同时，格式化程序接受参数并将其转换回字符串：


var-ractive=新的ractive({
el:'主要'，
模板：“#模板”，
数据：{
转换：[
{
fn:“函数名”，
args:['arg1'，2'，arg3']
},
{
fn:“AnotherMethod”，
args:[4.678]
}
],
格式：函数（args）{
返回args.map（JSON.stringify）.join（'，'）；
}    
},
updateArgs:函数（索引，str）{
var keypath='转换['+index+'].args'，
args=this.get（keypath）；
试一试{
//如果您不想评估，也可以使用JSON.parse
set（keypath，eval（'（['+str+']））；
}捕捉（错误）{
//重置
此.set（keypath，null）；
此.set（keypath，args）；
}
}
});

输入

{{#每个变换：i}


{{/每个}}

输出

{{{#每个变换}}

函数名：{{fn}

args：


{{{#每个args}
{{JSON.stringify（this）}}（{{typeof this}}）

{{/每个}}


{{/每个}}

我刚想起来，但我不确定该如何声明它。我还担心控制台警告
双向绑定对表达式不起作用…
——这只是一个友好的提醒，可以忽略吗？是的，这只是一条调试消息，以防有人尝试执行
，并惊讶地发现输入10并没有导致
数字变为5。它不会对你的应用程序造成任何问题，如果元素有
twoway='false'
，那么消息（应该？）在下一个版本中被压制。啊……我认为我的问题源于我使用的是CDN“latest”而不是“edge”--我收到一个错误
未捕获类型错误：无法在每个按键上读取未定义的
的属性“split”，因此这可能是一个愚蠢的问题，但是如果您将
事件
作为参数传递，为什么不直接引用
事件。上下文
进行更新，而不是在keypath上获取/设置；或者使用
event.keypath
而不是重建它？我设法复制了我的最新版本--vs，其中第二个版本经常抛出
uncaughttypeerror:无法读取未定义的属性“str”
，下一次单击将转储“缺少的”行