JsViews #index not updated when view model changes

Question

Do I have to force a refresh somehow? I have a grid that gets updated when I call "remove", but the indices are not re-numbered.

Has anyone run into this before?

**Remove function:**
$("#result")
   .on("click", ".change", function(){
     var dataItem = $.view(this).data;
         $.observable(dataItem).setProperty("name", dataItem.name + "*");
    })
  .on("click", ".remove", function(){
     var index = $.view(this).index;
         $.observable(people).remove(index);
   });

http://jsfiddle.net/mawaru/mfMBA/

UPDATE: I think i figured it out.

I added this line.

      $.observable(people).refresh(people);

Is that correct?

Answer 1

Your tag that renders #index is not data-bound. You need to write either:

<span>{^{:#index + 1}}</span>

or

<span data-link="#index + 1"></span>

Calling $.observable(people).refresh(people); will work because it re-renders all the items, rather than incrementally inserting or removing. But the approaches I suggest above are better since they allow the insertion and deletion to be incremental.