Javascript 无法在my'；中显示变量；模板&x27；正确使用handlebar.js_Javascript_Templates_Wordpress_Handlebars.js

Javascript 无法在my'；中显示变量；模板&x27；正确使用handlebar.js

javascript templates wordpress

Javascript 无法在my'；中显示变量；模板&x27；正确使用handlebar.js,javascript,templates,wordpress,handlebars.js,Javascript,Templates,Wordpress,Handlebars.js,我有一个Handlebar脚本，我正试图通过一个对象迭代到下面的“模板”。即使我可以在对象（当我执行console.log（行）时是一个对象）中看到“badNodes”，它也不会传递到模板，我看到的只是视图/模板中地址旁边的一个空白条目有人能告诉我我做错了什么吗？p.S我对Handlebar.js不熟悉 <script class="template" type="text/html"> <div class="badNodesContainer">

我有一个Handlebar脚本，我正试图通过一个对象迭代到下面的“模板”。即使我可以在对象（当我执行console.log（行）时是一个对象）中看到“badNodes”，它也不会传递到模板，我看到的只是视图/模板中地址旁边的一个空白条目

有人能告诉我我做错了什么吗？p.S我对Handlebar.js不熟悉

<script class="template" type="text/html">
    <div class="badNodesContainer">
        {{#row}}
        <div class="hash{{badNodes.hash}} help-tip">
            <p>
                <strong>Address: </strong>{{badNodes.address}}</br>
            </p>
        </div>
        {{/row}}
    </div>
</script>


{{#行}

地址：{{badNodes.Address}


{{/行}

//ajax请求的后半部分

    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        //_.templateSettings.variable = "badNode";
        var source = $("script.template").html();
        var template = Handlebars.compile(source);

        $.each(checkinData, function (index, row) {
                row.badNodesHTML = "";
                var AB_action_login = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://asite.com/app/login.php?username=' + row.user + '&hash=' + row.signature + '"><i class="fa fa-external-link"></i> App</a>';
                if (row.postid == null) {
                    var AB_action_order = '<a class="btn btn-default btn-sm hidden" disabled="disabled" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
                } else {
                    var AB_action_order = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
                }
                row.AB_login = AB_action_login;
                row.AB_order = AB_action_order;
                row.AB_actions = AB_action_login + AB_action_order;

                if (row.badNodes.length) {
                    $.each(row.badNodes, function (idx, badNode) {
                        badNode.address.toString()
                        badNode.address = /:(.+)/.exec(badNode.address)[1];
                        row.badNodesHTML += template(badNode);
                        row.AB_actions;
                    });
                }
            }
        );

.done（函数（数据、结果、jqXHR）{
var checkinData=JSON.parse（data）.data；
var行=[]；
//_.templateSettings.variable=“badNode”；
var source=$（“script.template”）.html（）；
var template=handlebar.compile（源代码）；
$.each（检查数据，函数（索引，行）{
row.badNodesHTML=“”；
var AB_action_login=''；
if（row.postid==null）{
var AB_action_order=''；
}否则{
var AB_action_order=''；
}
row.AB_login=AB_action_login；
row.AB_order=AB_action_order；
row.AB_actions=AB_action_login+AB_action_order；
if（row.badNodes.length）{
$.each（row.badNodes，function（idx，badNode）{
badNode.address.toString（）
badNode.address=/：（.+）/.exec（badNode.address）[1]；
row.badNodesHTML+=模板（badNode）；
row.AB_动作；
});
}
}
);

您正在通过模板内的

#行

访问对象，即使您传递到模板中的对象如下所示：

{
    hash: 'some hash',
    address: 'some address'
}

<script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

<style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>

因此，为了绑定它，请尝试按如下方式通过键访问它：

{
    hash: 'some hash',
    address: 'some address'
}

<script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

<style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>

我建议您准备一个javascript对象，该对象具有您想要的确切形状和形式，然后将其传递给模板。您将在一个

$中格式化输出。每个循环并分别传递每一行，从组织的角度看，这可能会变得混乱。此外，您正在javascript中为您也可以放入模板。然后，您所要做的就是将一个行
对象传递给包含所有必需信息的模板
重构版本可能如下所示：
{
    hash: 'some hash',
    address: 'some address'
}

<script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

<style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>


.btn zabs{
宽度：70px；
文本对齐：左对齐；
}
.done（函数（数据、结果、jqXHR）{
var checkinData=JSON.parse（data）.data；
var行=[]；
var source=$（“script.template”）.html（）；
var template=handlebar.compile（源代码）；
var$container=$（“#BadNodeContainer的父项”）；
$.each（检查数据，函数（索引，行）{
if（row.badNodes.length）{
$.each（row.badNodes，function（idx，badNode）{
badNode.address.toString（）
badNode.address=/：（.+）/.exec（badNode.address）[1]；
});
}
});
$container.html（模板（checkinData））；
});
{{#每个坏节点}

地址：{{Address}


{{/每个}}
{{{#如果是posted}
{{else}
{{/if}

注意，我将按钮模板放在任意位置。我确信您希望重新组织它们所属的位置。这仅用于演示。
您正在通过模板内的\row
访问对象，即使传递到模板中的对象如下所示：
{
    hash: 'some hash',
    address: 'some address'
}

<script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

<style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>

因此，为了绑定它，请尝试按如下方式通过键访问它：
{
    hash: 'some hash',
    address: 'some address'
}

<script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

<style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>

我建议您准备一个javascript对象，该对象具有您想要的确切形状和形式，然后将其传递给模板。您将在一个$中格式化输出。每个循环并分别传递每一行，从组织的角度看，这可能会变得混乱。此外，您正在javascript中为您也可以放入模板。然后，您所要做的就是将一个行
对象传递给包含所有必需信息的模板
重构版本可能如下所示：
{
    hash: 'some hash',
    address: 'some address'
}

<script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

<style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>


.btn zabs{
宽度：70px；
文本对齐：左对齐；
}
.done（函数（数据、结果、jqXHR）{
var checkinData=JSON.parse（data）.data；
var行=[]；
var source=$（“script.template”）.html（）；
var template=handlebar.compile（源代码）；
var$container=$（“#BadNodeContainer的父项”）；
$.each（检查数据，函数（索引，行）{
if（row.badNodes.length）{
$.each（row.badNodes，function（idx，badNode）{
badNode.address.toString（）
badNode.address=/：（.+）/.exec（badNode.address）[1]；
});
}
});
$container.html（模板（checkinData））；
});
{{#每个坏节点}

地址：{{Address}


{{/每个}}
{{{#如果是posted}
{{else}
{{/if}

注意，我将按钮模板放在任意位置。我相信您会希望重新组织它们所属的位置。这仅用于演示