Empty "jsv" script tags by design?

offtopic commented 7 years ago

Partial Template:

<script id="tpl" type="text/x-jsrender">
        <div>
            {{for ui.colGroups}}
                <div class="group-index">
                    <span>Q{{>index}}</span>
                    <i class="expand-group fa" data-link="class{merge:expanded toggle='fa-minus'}class{merge:!expanded toggle='fa-plus'}"></i>
                </div>
           {{/for}}
        </div>
    </script>

Resulting Code:

<div class="header-content"><script type="jsv#1_"></script>
        <div>
            <script type="jsv#2_"></script><script type="jsv#3_"></script>
                <div class="group-index">
                    <span>Q1</span>
                    <i class="expand-group fa fa-plus" data-link="class{merge:expanded toggle='fa-minus'}class{merge:!expanded toggle='fa-plus'}"></i>
                </div>
            <script type="jsv/3_"></script><script type="jsv#4_"></script>
                <div class="group-index">
                    <span>Q2</span>
                    <i class="expand-group fa fa-minus" data-link="class{merge:expanded toggle='fa-minus'}class{merge:!expanded toggle='fa-plus'}"></i>
                </div>
            <script type="jsv/4_"></script><script type="jsv#5_"></script>
                <div class="group-index">
                    <span>Q3</span>
                    <i class="expand-group fa fa-plus" data-link="class{merge:expanded toggle='fa-minus'}class{merge:!expanded toggle='fa-plus'}"></i>
                </div>
            <script type="jsv/5_"></script><script type="jsv#6_"></script>
                <div class="group-index">
                    <span>Q4</span>
                    <i class="expand-group fa fa-plus" data-link="class{merge:expanded toggle='fa-minus'}class{merge:!expanded toggle='fa-plus'}"></i>
                </div>
            <script type="jsv/6_"></script><script type="jsv/2_"></script>
        </div>
    <script type="jsv/1_"></script></div>

Is the usage correct, are they empty script tags by design? Are there any performance issues with so much empty script tags?

Thank's, offtopic

BorisMoore commented 7 years ago

Yes, that is by design.

JsViews does smart data-binding, so that when you observably change data, the rendered content is updated incrementally, rather than removing all the previously rendered content and reapplying the whole template.

In your example if you write {^{for ui.colGroups}}... then you can observably add or remove colGroup items and JsViews will insert or remove the rendered HTML just for the added/removed item, without touching the rest of the content.

The $.view() API (http://www.jsviews.com/#jsv.d.view) lets you get from an HTML element to the relevant data, etc.

These features are made possible by JsViews tracking the 'mapping' between data-linked data and the HTML, and the empty script tags is one of the ways it achieves that. They are used as 'markers' - and have no effect on the HTML rendering.

BorisMoore commented 7 years ago

@offtopic - didn't hear back from you in response, but I'll close this, as answered.

BorisMoore / jsviews

Empty "jsv" script tags by design? #372