Jquery 如何替换把手模板中的文本

我想替换模板中的文本，但使用“replaceWith”时会出现错误

我有一个天数列表，每次单击一天，我都要替换文本

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

{{{#每个这个}

{{name}{{{if-gender}}-{{gender}{{/if}}
{{{content}}}


{{/每个}}

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>

$（文档）.ready（函数（）{
//警报（$（（$span.hello”）.text（）；
风险值数据=[
{
姓名：“约翰·多伊”，
内容：“周日#1去购物中心”，
性别：“M”，
迪亚：“星期日”
},
{
名称：“Geronido fabian”，
内容：“周一lorem ipsus你好世界”，
性别：“M”，
迪亚：“星期一”
},
{
姓名：“乔安娜·多伊”，
内容：“周三lorem ipsus你好，世界”，
性别：“F”，
迪亚：“星期三”
},
{
姓名：“Phillipe Mato Doe”，
内容：“星期二lorem ipsus你好，世界”，
性别：“M”，
迪亚：“星期二”
},
{
姓名：“杰拉德·约翰·多伊·莱蒙”，
内容：“周四lorem ipsus你好，世界”，
性别：“M”，
迪亚：“星期四”
},
{
名字：“杰拉德·斯蒂芬尼”，
内容：“Friday lorem ipsushello world”，
性别：“M”，
迪亚：“星期五”
},
{
名称：“弗朗索瓦·圣帕尼”，
内容：“星期六lorem ipsus你好，世界”，
性别：“F”，
迪亚：“星期六”
},
{
名称：“卢西恩·圣菲”，
内容：“Sunday#2 lorem ipsushello world”，
性别：“F”，
迪亚：“星期日”
}
];
功能模型（数据）{
//控制台日志（数据）；
var template=handlebar.compile（$（'#template'）.html（））；
var temp=模板（数据）；
//$（'ul.dayofweek'）。替换为（临时）；
$（'ul.dayofweek'）。附加（临时）；
}
//将查找与此DIA相关的所有会议（天）
功能查找会议（直径）{
风险值天数=[]；
var holderDayfind=$.grep（数据，函数（d）{
$（d）.每个函数（键、值）{
如果（value.dia==直径）{
推送（价值）；
}
});
});
//console.log（items）；//显示包含日期的所有对象
模型e（天）；
}；//函数查找会议
/*************************
起点
**************************/
//这是主要行动
//它将查找已单击的日期
$（'li.dia'）。关于（'click'，函数（e）{
var dia=$（this.attr（'dia'）；
//console.log（dia）；//显示单击的日期
最终会议（直径）；
返回false；
});
});

我已经更新了我的函数模型

如果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);
}