无法在我的 jquery 模板中使用全局变量答案

【问题标题】：cannot use a global variable inside my jquery template无法在我的 jquery 模板中使用全局变量
【发布时间】：2017-05-25 03:01:21
【问题描述】：

在我的页面上有一个基于 bootstrap 的工件滑块，我定义了一个全局变量（在 java 脚本中）来计算从服务器返回的工件数量，以用不同的类填充两个不同的 div。但是当我在 jquery 模板中使用我的变量时（我的 if 案例），我得到下面的错误

TypeError: k.nodes 未定义

当我尝试在 console.log() 中记录我的变量（“artifactCounterV”）时，在打印变量的值后出现此错误

TypeError：无法将 a 转换为原始类型

这是我的主页.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>home page</title>


<script language="javascript" type="text/javascript">
    var restUrl = "<c:url value = '/rest/core/goods/products/book' />";
    var restUrlOrderItem = "<c:url value = '/rest/order/orderItem/front/addToBasket/' />";
    var artifactCounterV = 1;
    $(function() {
        fillTable();
    });


    function artifactCounter()
    {
        return artifactCounterV++;
    }
    function fillTable() {
        $('#entityBody' + ' :not(script)').remove();
        $.getJSON(restUrl + "/front/list/getAll", function(entities) {
            if (entities.entityList)
                $('#GridRowTemplate').tmpl(entities.entityList).prependTo(
                        '#entityBody');
            else {
                $('#GridRowTemplate').tmpl(entities).prependTo("#entityBody");
            }
        });
    }

    function addToShoppingCart(productId) {
        $.ajax({
            type : "POST",
            url : restUrlOrderItem + productId,
            success : function(res) {
                if (res)
                    return res.id
            }
        });

    }
    function goToBasketPage(){
        window.location="<c:url value ='/View/frontEnd/cart/Index.jsp'/>";
    }
</script>
</head>
<body>
    <span id="confirm"></span>
    <%@ include file="Header.jsp"%>
    <%@ include file="TopMenu.jsp"%>
    <%@ include file="Commercial.jsp"%>
</body>
</html>

这是我的 artifactSlider.jsp

artifactSlider.jsp包含在commercial.jsp中，商业页面没有java脚本代码，纯html。

<!------------- product-slider ----------->
<div id="carousel-example" class="carousel slide hidden-xs "
            data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                    <div id="entityBody" class="entityBody">
                        <script id="GridRowTemplate" type="text/html">
                        ${console.log(artifactCounterV)}
                        {{if artifactCounterV == 1 }}
                            <div class="item active">
                            <div class="row">
                        {{/if}}

                        {{if artifactCounterV==6}}
                            <div class="item">
                            <div class="row">
                        {{/if}}
                                <div class="col-sm-2 item-holder">
                                    <div class="col-item">
                                        <div class="photo">
                                            <img
                                                src="<c:url value='/rest/attachment/front/getFile/' />${pictureCode}"
                                                class="img-responsive" />
                                        </div>
                                        <div class="info">
                                            <div class="row">
                                                <div class="price col-md-12">
                                                    <h5>${name}</h5>
                                                    <h5 class="price-text-color separator">
                                                        <span>price: </span> ${price} $
                                                    </h5>
                                                </div>
                                            </div>
                                            <div class="separator">
                                                <p class="btn btn-default col-md-12">
                                                    <i class="fa fa-shopping-cart"></i> <span href=""
                                                        class="hidden-sm" onclick="addToShoppingCart(${id})">add to basket</span>
                                                </p>
                                                <p class="btn btn-default col-md-12">
                                                    <i class="fa fa-list"></i> <a class="hidden-sm" href="">more</a> <span style="display: none">${artifactCounter()}</span>
                                                </p>
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </div>
                                </div>
                        {{if artifactCounterV==6 || (artifactCounterV>6 && artifactCounterV<=12) }}
                            </div>
                            </div>
                        {{/if}}
                    </script>
                    </div>
                </div>
            </div>
    <!------------- product-slider ----------->

【问题讨论】：

你的 JS 代码是在 DOM 渲染之前还是之后包含的？
这是我们可以调试的地方吗？
亲爱的@Cruiser 我编辑了我的代码，就像它真的在我的示例中一样
@SergChernata 很遗憾没有

标签： javascript jquery jquery-templates

【解决方案1】：

我记得尝试过类似的事情，问题是我必须在窗口或文档对象上创建变量。

【讨论】：