0

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?

mawaru
  • 25
  • 1
  • 7

1 Answers1

0

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.

BorisMoore
  • 8,444
  • 1
  • 16
  • 27
  • Is there any way for me to send the updated index to another javascript function on removal. When i try onclick="removeTags({{:#index}})",the index is not getting updated after each removal. – user1776573 Sep 02 '16 at 12:45
  • Yes - but better not to use DOM Level 0 event binding: onclick=... I would encourage you to use data-link="{on removeTags}". You can pass parameters - data-link="{on removeTags #index}" - but if all you want is the index, you don't need to pass it, if you, use eventArgs.view.index, Take a look also at "http://www.jsviews.com/#computed", "http://www.jsviews.com/#link-events" and "http://www.jsviews.com/#samples/computed/shopping-cart@tmpl" - and the function: function removeItem(ev, eventArgs). With a parameter it would be function removeItem(indexParam, ev, eventArgs) .{ – BorisMoore Sep 04 '16 at 10:26