JSViews array.length updating incorrectly

Question

I have created a simple paging view with JSViews. I have two issues.

here is a fiddle: JSViews Pagination Fiddle

1) When using array.length, it seems to change after I update the data, despite the length of the array remaining the same:

This line:

{^{for questions ~s = start ~c=count ~l=totalQuestions}}

was initially

{^{for questions ~s = start ~c=count ~l=questions.length}}

so I didn't need to include the total number of questions in the data (navData).

using .length, after I update the array (which I know I am doing wrong, but that is the second question!!!) questions.length changes from 10 to 20 and so the rendering goes wrong.

Can anyone see what I have done wrong, which may of course be related to part 2.

2. I cannot get the view to re-render changing just the "start" with setProperty(), so I am using a hack. Is there a better way to do this template?

Answer 1

Here is an update of your sample.

You needed to make your {{if}} tags data-linked ({^{if}}) to respond to changes in ~s, as in:

{^{if #getIndex() == ~l-1 && (~s + ~c < ~l -1) }}

You bizarre rendering results and apparent questions.length changes may be side effects of having <span>s directly inside a <ul>, which is invalid. JsViews assumes valid HTML structure in <ul>s. See my modified jsfiddle...

Let me know if you continue to see issues...