Question

我正在使用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”属性，则会编辑另一个元素..

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

Answer 1

我希望你自己明白，如果没有，这是一个可能的解决方案：https://jsfiddle.net/nohvtLhs/1/

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

<强> 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})

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

1 个答案: