最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Mustache conditional statement (ifelse) not working - Stack Overflow

programmeradmin0浏览0评论

Trying to e to grips with Mustache... the problem here is that the conditional 'if/else' is not working as expected. I am checking in the data if a user is french... if they are then show true, else show false.

Problem

Mustache is pletely ignoring the conditional and displaying both true and false for each table row.

My code

My markup

<!--  -->
<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>
<!--  -->

My 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));


});

Question

Why is the if/else not working here?

EDIT: Here is my entire document:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src=".1.1/jquery.min.js"></script>
        <script src=".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>

Trying to e to grips with Mustache... the problem here is that the conditional 'if/else' is not working as expected. I am checking in the data if a user is french... if they are then show true, else show false.

Problem

Mustache is pletely ignoring the conditional and displaying both true and false for each table row.

My code

My markup

<!--  -->
<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>
<!--  -->

My 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));


});

Question

Why is the if/else not working here?

EDIT: Here is my entire document:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare./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>
Share Improve this question edited Feb 14, 2017 at 12:17 Jethro Hazelhurst asked Feb 14, 2017 at 12:02 Jethro HazelhurstJethro Hazelhurst 3,2857 gold badges42 silver badges85 bronze badges 5
  • 1 You provided template3, while using template2 in view. There is no is_french usage in template2. – Andrey Commented Feb 14, 2017 at 12:06
  • My bad! So sorry about that, copied the wrong block! – Jethro Hazelhurst Commented Feb 14, 2017 at 12:08
  • 2 Interesting, but the code you've posted is totally OK, mustache template is fine, and it rendered as supposed. There should be the mistake in another part of code. Could you create fiddle where this problem reproduces? – Andrey Commented Feb 14, 2017 at 12:15
  • Trying to get a fiddle going... I updated my OP with the entire document. Strange indeed. – Jethro Hazelhurst Commented Feb 14, 2017 at 12:17
  • jsfiddle/poeama5u – Jethro Hazelhurst Commented Feb 14, 2017 at 12:20
Add a ment  | 

1 Answer 1

Reset to default 6

This is a problem of using template tag, which is actually HTML5 template tag. Using hashes in it makes browser think that this is document fragment. Seems like nested document fragments corrupt Mustache template.

Just change it to script tag, as in mustache manual.

<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>
发布评论

评论列表(0)

  1. 暂无评论