RivetsJS - Динамически связать вход к элементу списка

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 в списке изменится .. если я изменю с.в. редактирования-IDX = «133» атрибут на входе, то другой элемент будет редактироваться. .

Любые идеи о том, как я могу это добиться?

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