RivetsJS - Dynamically bind an input to a list item

Question

I'm using RivetsJS to create a dynamic list which will be editable via an input box, and use the two-way data binding to update the element...

The list code is:

<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>

And the RivetsJS binding:

<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>

Now I want to create an element which can edit the items in the list in real time.. something like

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

So that when I change the input data, element 133 on the list would change.. if I change the rv-editing-idx="133" attribute on the input, then another element would be edited..

Any ideas on how I can acheive that?

Answer 1

I hope you figured it out by yourself, if not, here's a possible solution: https://jsfiddle.net/nohvtLhs/1/

You can bind the input element, with the selected element from the array. How you select the element of the array its up to you, i used in the example some radio input elements. After that, you have a simple binding, like you do it usually.

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