Question

所以我试图在AJAX调用之后使用把手和jquery来处理一些DOM操作。

我有这样的事情：

<script id="answers-template" type="text/x-handlebars-template">
<td>
    <tr id="detail-{{userId}}">
      <td colspan="100">
        <table id="itemList" class="table table-striped">
            <thead>
                <tr id="head" class="dataRow">
                    <th class="cenas">cenas</th>
                    <th class="coisas">coisas</th>
                    <th class="bicho">bicho</th>
                </tr>
            </thead>
            <tbody>
                {{> templateDetailsItem}}
            </tbody>
        </table>
      </td>
    </tr>
</td>
</script>
<script id="template-details-item" type="text/x-handlebars-template">
{{#each responses}}
    <tr id="{{id}}">
        <td>{{nome_contacto}}</td>
        <td>{{numero_contacto}}</td>
        <td>{{preco}}</td>
    </tr>
{{/each}}
</script>

和JavaScript：

const answersOfUser = {
    userId: itemId,
    responses: response
};
Handlebars.registerPartial("templateDetailsItem", $("#template-details-item").html());
const template = Handlebars.compile($("#answers-template").html());
$('table#itemList tbody td')
    .append(template(answersOfUser));

但没有任何反应。甚至不是错误。

到目前为止，我可以告诉Handlebars工作正常，因为console.log(template(answersOfUser))给了我一个字符串，其中包含我想要的完整html。

给出的字符串是多行的，没有任何转义字符。这可能是吗？

我的方法有什么问题？

Answer 1

以下是我认为您需要解决的问题：

在answers-template中，你有一个td里面的tr。您需要用表格包装行。
当你使用.append时，看起来你正在将td附加到另一个td。我想你会想把td附加到itemList的tr。

Here's a working jsFiddle.

const template = Handlebars.compile($("#answers-template").html());
$('table#itemList > tbody > tr')
  .append(template(answersOfUser));

它没有完全正常工作（答案没有绑定到详细信息模板），但模板至少会附加到DOM。

Answer 2

我终于弄明白了。有各种各样的问题。返回似乎没有被jquery追加或之后接受，我也遇到了问题。只是希望jquery会给出某种错误而不是清空所有内容。

赞美@Ben Osborne指责我正确的方向。

模板：

    <script id="answers-template" type="text/x-handlebars-template">
    <tr id="detail-{{userId}}">
        <td colspan="100">
            <table id="itemList" class="table table-striped">
                <thead>
                    <tr id="head" class="dataRow">
                        <th class="cenas">cenas</th>
                        <th class="coisas">coisas</th>
                        <th class="bicho">bicho</th>
                    </tr>
                </thead>
                <tbody>
                    {{> templateDetailsItem}}
                </tbody>
            </table>
        </td>
    </tr>
</script>
<script id="template-details-item" type="text/x-handlebars-template">
    {{#each responses}}
    <tr id="{{id}}">
        <td>{{nome_contacto}}</td>
        <td>{{numero_contacto}}</td>
        <td>{{preco}}</td>
    </tr>
    {{/each}}
</script>

JS：

const answersOfUser = {
    userId: itemId,
    responses: response
};
Handlebars.registerPartial("templateDetailsItem", $("#template-details-item").html());
const template = Handlebars.compile($("#answers-template").html());
const htmlTemplate = template(answersOfUser);
$(that).parent().parent().after(htmlTemplate.replace(/[\r\n]/g, ''));

为什么JQuery不会将HTML附加到DOM

2 个答案: