CODEWITHSUNDEEP
javascriptjquerymustachetemplating
Jethro Hazelhurst
Jethro Hazelhurst

Reputation: 3285

Mustache conditional statement (if/else) not working

Trying to come 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 completely ignoring the conditional and displaying both true and false for each table row.

enter image description here

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

Upvotes: 3

Views: 8691

Answers (1)

Andrey
Andrey

Reputation: 4050

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>

Upvotes: 6

Related Questions