将 LI 附加到 text/x-jquery-tmpl答案

【问题标题】：Append an LI to text/x-jquery-tmpl将 LI 附加到 text/x-jquery-tmpl
【发布时间】：2012-02-14 12:40:18
【问题描述】：

我的模板：

        <script id="tmp_servicebuttons" class="template" type="text/x-jquery-tmpl">
            <li><a class="notification" href="${id}"><img src="${imgsrc}"/></a></li>
        </script>
    <script id="tmp_navigation" class="template" type="text/x-jquery-tmpl"> 
        <header>
            <nav>
                <ul class="top_bar_notifications">
                    <li>
                        <a href="#home" class="go home">
                            <img src="./resources/img/homebtn.png" alt="Home">
                        </a>
                    </li>

                    <li>
                        <a href="#" class="back">
                            <img src="./resources/img/backbtn.png" alt="Home">
                        </a>
                    </li>
                </ul>
            </nav>
...

我的主页：

    <!-- First Page after splash with main buttons -->
    <script id="tmp_home" class="template" type="text/x-jquery-tmpl">   
        <section id="${$item.panel_id}" class="home category panel">

            {{tmpl "#tmp_navigation"}}
...

我如何尝试追加：

var data = [{"id": "1", "imgsrc": "./resources/img/servicebtn.png"}];
$("#tmp_servicebuttons").tmpl(data).appendTo(".top_bar_notifications");

当我执行以下操作时，我的导航模板似乎只在某些部分更新。我总共有四个部分。它将更新四个模板中的两个，并且由于某种原因我的主模板不受影响。任何人都知道为什么这适用于一个部分而不适用于其他部分？谢谢！

【问题讨论】：

也许我遗漏了一些东西，但我很想知道为什么您需要动态更改模板结构。理想情况下，您的模板应该首先处理该逻辑。无论您必须附加到模板的任何条件都应该在模板本身中。
我正在对我的管理控制台进行 jsonp 调用，它会返回我想要更新我的 jquery tmpl 的数据。我可能正在接近这一切都是错误的，所以如果你知道一个好方法，我可以在上面的模板中附加一些 LI，我很想学习。我对 jQuery tmpl 了解不多。谢谢！
我知道你想做什么。您能否给我一个示例，说明您拨打电话时 json 的外观，以及您希望基于 json 对其进行哪些更改的快速示例。我相信我们可以找到一种方法来保持模板静态并在模板中添加逻辑而不是更改结构

标签： jquery html jquery-templates

【解决方案1】：

原来我试图将 html 数据插入到我的模板中。该 HTML 被解释为文本。我最终为 LI 创建了一个新模板，然后将 tmpl 附加到 UL。创建了一个模板：

  <script id="tmp_servicebuttons" class="template" type="text/x-jquery-tmpl">
        <li><a class="notification" href="${id}"><img src="${imgsrc}"/></a></li>
  </script>

然后将填充的数据附加到 UL

var data = JSON.parse(buttons);
$(data).each(function(){
    var data = [{"id": this.id, "imgsrc": this.imgsrc}];
    $("#tmp_servicebuttons").tmpl(data).appendTo(".top_bar_notifications");
});

【讨论】：