Question

我想替换模板中的文字但是当我使用＆＃39; replaceWith＆＃39;我收到了错误。

我有一个天数列表，每次点击一个我要替换的文本。

<ul>
    <li class="dia" dia="monday"><a href="#">Monday</a></li>
    <li class="dia" dia="tuesday"><a href="#">Tuesday</a></li>
    <li class="dia" dia="wednesday"><a href="#">Wednesday</a></li>
    <li class="dia" dia="thursday"><a href="#">Thursday</a></li>
    <li class="dia" dia="friday"><a href="#">Friday</a></li>
    <li class="dia" dia="saturday"><a href="#">Saturday</a></li>
    <li class="dia" dia="sunday"><a href="#">Sunday</a></li>
</ul>

<ul class="dayofweek">
    <script id="template" type="text/x-handlebars-template">
    {{#each this}}
    <li>
        <h2 class="essaie">{{name}} {{#if gender}} - <span class="gender">{{gender}}</span>{{/if}}</h2>
        <p>{{{content}}}</p>
    </li>
    {{/each}}
    </script>
</ul>

javascript

<script type="text/javascript">
    $(document).ready(function(){
        //alert($("span.hello").text());
        var data = [
                {
                    name: 'John Doe',
                    content: 'Sunday #1 go to the mall',
                    gender: "M",
                    dia: "sunday"
                },
                {
                    name: 'Gerondo  fabian',
                    content: '<strong>Monday lorem ipsus</strong> hello world',
                    gender: "M",
                    dia: "monday"
                },
                {
                    name: 'Joanna Doe',
                    content: '<strong>wednesday lorem ipsus</strong> hello world',
                    gender: "F",
                    dia: "wednesday"
                },
                {
                    name: 'Phillipe  Mato Doe',
                    content: '<strong>tuesday lorem ipsus</strong> hello world',
                    gender: "M",
                    dia: "tuesday"
                },
                {
                    name: 'Gérard-John Doe Lemont',
                    content: '<strong>Thursday lorem ipsus</strong> hello world',
                    gender: "M",
                    dia: "thursday"
                },
                {
                    name: 'Gérard  Stéphany',
                    content: '<strong>Friday lorem ipsus</strong> hello world',
                    gender: "M",
                    dia: "friday"
                },
                {
                    name: 'Françoise  Stéphanie',
                    content: '<strong>Saturday lorem ipsus</strong> hello world',
                    gender: "F",
                    dia: "saturday"
                },
                {
                    name: 'Lucienne  Stéphanie',
                    content: '<strong>Sunday #2 lorem ipsus</strong> hello world',
                    gender: "F",
                    dia: "sunday"
                }

                ];


        function modele(data){
        //console.log(data);
        var template = Handlebars.compile( $('#template').html() );
        var temp = template(data);

        //$('ul.dayofweek').replaceWith(temp);
        $('ul.dayofweek').append(temp);
        }

        //will find all the meetings related with this DIA (day)
        function findTheMeetings(dia){
            var days = [];
            var holderDayfind = $.grep(data, function(d){
                $(d).each(function(key, value){
                    if (value.dia == dia){
                        days.push(value);
                    }
                });
            });
            //console.log(items); //show all the object that has the day
            modele(days);
        };//function findTheMeetings


        /*************************


        START point
        **************************/

        //this is the main action
        //it will find the day that has been click
        $('li.dia').on('click', function(e){


            var dia = $(this).attr('dia');
            //console.log(dia); //show the day clicked on
            findTheMeetings(dia);
            return false;

        });

    });
</script>

Answer 1

我更新了我的功能模块。

如果li的大小大于1，则删除li的元素。

function modele(data){
    //console.log(data);
    var template = Handlebars.compile( $('#template').html() );
    var temp = template(data);

    /* UPDATE */
    var ul = $("ul.dayofweek");
    var lis = ul.children().size();
    //console.log(lis);

    //if li.length is greater than 1 so remove all elements
    if (lis > 1){
        $("ul.dayofweek li").remove();
    }
    $('ul.dayofweek').append(temp);
}

如何替换HandleBar模板中的文本

1 个答案: