Search code examples
javascriptarraysobservablejsviews

JsViews not removing the script tags after updating change with observable api on array

I have been working with JsViews recently. But i been getting issue with $.observable(array).refresh()

Lets just say if i have a array of objects

countries = [
  {country : 'India'}, 
  {country : 'USA'},
  {country : 'Africa'}
]

When i'm using a template to loop through each element in the array it renders the content to my requirement but when i look at the HTML structure it shows like this.

<html>
  <body>
    <script type="jsv#1"></script>
    <div class="country">India</div>
    <script type="jsv/1"></script>
    <script type="jsv#2"></script>
    <div class="country">USA</div>
    <script type="jsv/2"></script>
    <script type="jsv#3"></script>
    <div class="country">Africa</div>
    <script type="jsv/3"></script>
  </body>
<html>

But when i get a new element in the array and push it to the top. I have the following array.

countries = [
  {country : 'Canada'},
  {country : 'India'}, 
  {country : 'USA'},
  {country : 'Africa'}
]

And then i apply

$.observable(countries).refresh(countries);

What i get on html structure is :

<html>
  <body>
    <script type="jsv#1"></script>
    <script type="jsv/1"></script>
    <script type="jsv#2"></script>
    <script type="jsv/2"></script>
    <script type="jsv#3"></script>
    <script type="jsv/3"></script>
    <script type="jsv#4"></script>
    <div class="country">Canada</div>
    <script type="jsv/4"></script>
    <script type="jsv#5"></script>
    <div class="country">India</div>
    <script type="jsv/5"></script>
    <script type="jsv#6"></script>
    <div class="country">USA</div>
    <script type="jsv/6"></script>
    <script type="jsv#7"></script>
    <div class="country">Africa</div>
    <script type="jsv/7"></script>
  </body>
<html>

Here the tags 'jsv#1', 'jsv#2', 'jsv#3' and their respective closing tags are not being removed.

I found this issue with JsViews V1.0 released in 2012.

Is this the correct behaviour or should i go with different approach of inserting elements.

Thank you.

Solution

  • That's not the correct behavior.

    V1.0 has not been released so I'm not clear what version you are using.

    Can you switch to the latest version and try again: http://www.jsviews.com/#download.

    You should not set countries to the new array, then call refresh() on the new array. Rather you should do:

    var countries = [
  {country : 'India'}, 
  {country : 'USA'},
  {country : 'Africa'}
];

tmpl.link("#result", countries);

$.observable(countries).refresh([
  {country : 'Canada'},
  {country : 'India'}, 
  {country : 'USA'},
  {country : 'Africa'}
]);

    See http://www.jsviews.com/#refresh.

    But for inserting better to use insert(). See http://www.jsviews.com/#insert.