Question

试图掌握胡子......这里的问题是有条件的＆＃39; if / else＆＃39;没有按预期工作。我正在检查数据，如果用户是法国人...如果他们然后显示为真，否则显示错误。

问题

Mustache完全忽略条件，并为每个表行显示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>

Mustache条件语句（if / else）不起作用

1 个答案: