小胡子条件语句 (if/else) 不起作用

Question

正在尝试处理 Mustache...这里的问题是条件 'if/else' 没有按预期工作。如果用户是法国人，我正在检查数据...如果他们显示为真，则显示为假。

问题

Mustache 完全忽略条件并为每个 table 行显示 true 和 false。

我的代码

我的标记

<!--  -->
<h3>Looping through people</h3>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Language</th>
        </tr>
    </thead>

    <template id="template2">
        {{#users}}
            <tr>
                <td>{{name}}</td>
                <td>{{age}}</td>
                <td>{{language}}</td>
                {{#is_french}}
                    <td>True</td>
                {{/is_french}}
                {{^is_french}}
                    <td>False</td>
                {{/is_french}}
            </tr>
        {{/users}}
    </template>
    <tbody id="table2"></tbody>
</table>
<!--  -->

我的jQuery

$(function(){


    /**
     * conditional data
     */
    template = $('#template2').html();
    data = {
        'users': [{
                name: 'John',
                age: 22,
                language: 'French',
                is_french: true,
            },
            {
                name: 'Billy',
                age: 33,
                language: 'Anglaise',
                is_french: false,
            },
            {
                name: 'Michael',
                age: 77,
                language: 'Cambodian',
                is_french: false,
        }]
    };
    $('#table2').html(Mustache.render(template, data));


});

问题

为什么 if/else 在这里不起作用？

编辑：这是我的整个文档：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
    </head>
    <body>

        <div class="container">

            <h1 class="text-center">Mustache Examples</h1>

            <!--  -->
            <h3>Looping through people</h3>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Language</th>
                    </tr>
                </thead>

                <template id="template2">
                    {{#users}}
                        <tr>
                            <td>{{name}}</td>
                            <td>{{age}}</td>
                            <td>{{language}}</td>
                            {{#is_french}}
                                <td>True</td>
                            {{/is_french}}
                            {{^is_french}}
                                <td>False</td>
                            {{/is_french}}
                        </tr>
                    {{/users}}
                </template>
                <tbody id="table2"></tbody>
            </table>
            <!--  -->

        </div>


        <script>

        $(function(){

            /**
             * conditional data
             */
            template = $('#template2').html();
            data = {
                'users': [{
                        name: 'John',
                        age: 22,
                        language: 'French',
                        is_french: true,
                    },
                    {
                        name: 'Billy',
                        age: 33,
                        language: 'Anglaise',
                        is_french: false,
                    },
                    {
                        name: 'Michael',
                        age: 77,
                        language: 'Cambodian',
                        is_french: false,
                }]
            };
            $('#table2').html(Mustache.render(template, data));

        });

        </script>

    </body>
</html>

Answer 1

这是使用template标签的问题，实际上是HTML5 template tag。在其中使用哈希会使浏览器认为这是文档片段。似乎嵌套文档片段损坏了 Mustache 模板。

只需将其更改为 script 标记，如小胡子手册中所述。

<script id="template2" type="x-tmpl-mustache">
  {{#users}}
    <tr>
      <td>{{name}}</td>
      <td>{{age}}</td>
      <td>{{language}}</td>                            
      {{#is_french}}
          <td>True</td>
      {{/is_french}}
      {{^is_french}}
          <td>False</td>
      {{/is_french}}
    </tr>
  {{/users}}
</script>

小胡子条件语句 (if/else) 不起作用

Mustache conditional statement (if/else) not working

javascript

jquery

mustache

templating