admin管理员组

文章数量:1325767

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>

本文标签: javascriptMustache conditional statement (ifelse) not workingStack Overflow