RivetsJS - 将输入动态绑定到列表项答案

【问题标题】：RivetsJS - Dynamically bind an input to a list itemRivetsJS - 将输入动态绑定到列表项
【发布时间】：2015-05-25 18:26:12
【问题描述】：

我正在使用 RivetsJS 创建一个可通过输入框编辑的动态列表，并使用双向数据绑定来更新元素...

列表代码为：

<ul id="todo">
  <li rv-each-todo="list.todos">
    <input type="checkbox" rv-idx="todo.idx" rv-checked="todo.done">
    <span>{ todo.summary }</span>
  </li>
<ul>

还有 RivetsJS 绑定：

<script type="text/javascript">


var list = { 
    "todos": [
            {"idx":133, "done":1,"summary":"Eat"},
            {"idx":25, "done":0,"summary":"Code"},
            {"idx":33, "done":1,"summary":"Sleep"},
            {"idx":24, "done":0,"summary":"Repeat"}
        ]
 } 
rivets.bind($('#todo'), {list: list})

</script>

现在我想创建一个可以实时编辑列表中项目的元素.. 类似

<input rv-editing-idx="133"></input>

所以当我更改输入数据时，列表中的元素 133 会更改..如果我更改输入上的 rv-editing-idx="133" 属性，那么将编辑另一个元素..

关于如何实现这一点的任何想法？

【问题讨论】：

标签： javascript data-binding 2-way-object-databinding rivets.js javascript-databinding

【解决方案1】：

希望你自己想通了，如果没有，这里有一个可能的解决方案：https://jsfiddle.net/nohvtLhs/1/

您可以将输入元素与数组中的选定元素绑定。如何选择数组的元素取决于您，我在示例中使用了一些无线电输入元素。之后，你就有了一个简单的绑定，就像你通常做的那样。

HTML：

<ul id="todo">
  <li rv-each-todo="list.todos">
    <input type="radio" rv-idx="todo.idx" rv-checked="todo.done" name="todo" rv-on-change="list.change">
    <span>{ todo.summary }</span>
  </li>
<ul>

<input id="changeele" rv-value="summary"></input>

JS：

var ele = document.getElementById('changeele');
var eleBinding = rivets.bind(ele, {});

var list = { 
    "todos": [
            {"idx":133, "done":true,"summary":"Eat"},
            {"idx":25, "done":false,"summary":"Code"},
            {"idx":33, "done":false,"summary":"Sleep"},
            {"idx":24, "done":false,"summary":"Repeat"}
        ],
    "change": function(event, scope) {
        eleBinding.unbind();
        eleBinding = rivets.bind(ele, scope.list.todos[scope.index]);
    }
 } 

rivets.bind(document.getElementById('todo'), {list: list})

【讨论】：