0

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

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

4

1 回答 1

0

我希望您自己弄清楚，如果没有，这是一个可能的解决方案：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})
于 2015-07-06T09:25:39.150 回答