Javascript 使用jQuery解析带有变量和变量对的模板_Javascript_Jquery

Javascript 使用jQuery解析带有变量和变量对的模板

javascript jquery

Javascript 使用jQuery解析带有变量和变量对的模板,javascript,jquery,Javascript,Jquery,我的应用程序中有模板文件，我想用jQuery来比较。我不能做这个服务器端，所以我必须用JS来做。在我的脚本中，是一个对象，它包含应该用指定值解析的变量。如果该值是一个对象（变量对），那么对于该对象的每次迭代，这些标记之间的HTML都会被复制。我的意思是： citizen_results = [ { firstname: "Elliot", lastname: "Stabler", dateofbirth: "12/01/7

我的应用程序中有模板文件，我想用jQuery来比较。我不能做这个服务器端，所以我必须用JS来做。在我的脚本中，是一个对象，它包含应该用指定值解析的变量。如果该值是一个对象（变量对），那么对于该对象的每次迭代，这些标记之间的HTML都会被复制。我的意思是：

citizen_results = [
{
    firstname: "Elliot",
    lastname: "Stabler",
    dateofbirth: "12/01/70",
    sex: "M",
    height: "180cm",
    id: 1
  },
  {
    firstname: "Olivia",
    lastname: "Benson",
    dateofbirth: "03/15/78",
    sex: "F",
    height: "180cm",
    id: 2
  }
  {
    firstname: "John"
    lastname: "Munch",
    dateofbirth: "04/08/48",
    sex: "M",
    height: "180cm",
    id: 3
  }
]

data = {
    results: citizen_results,
    pagination: "<ul><li><a href="#">1</a></li></ul>'
}

parseTemplate('citizen-results.html', data);

function ParseTemplate(file, data){
        $.get('html/'+file, function(response){
            var contents = response
            Object.keys(data).forEach(function(key,index) {
                if(isObject(data[key])){
                    $.each(data[key], function(k, v){
                        
                    })
                } else {
                    contents.replace("{" + key + "}", data[key]);
                }
            })
        })
        $('#content-container').html(contents);
    }
function isObject(var item){
        return typeof item === 'object' && item !== null
    }

citizen\u结果=[
{
名字：“艾略特”，
姓：“Stabler”，
出生日期：“1970年1月12日”，
性别：“M”，
身高：“180厘米”，
身份证号码：1
},
{
名字：“奥利维亚”，
姓：“本森”，
出生日期：“1978年3月15日”，
性别：“F”，
身高：“180厘米”，
身份证号码：2
}
{
名字：“约翰”
姓：“芒克”，
出生日期：“48年8月4日”，
性别：“M”，
身高：“180厘米”，
身份证号码：3
}
]
数据={
结果：公民大学结果，
页码：“”
}
parseTemplate（'citizen-results.html'，数据）；
函数解析模板（文件、数据）{
$.get（'html/'）+文件、函数（响应）{
变量内容=响应
Object.keys（数据）.forEach（函数（键，索引）{
if（isObject（数据[键]）{
$。每个（数据[键]、函数（k，v）{
})
}否则{
替换（“{”+键+“}”，数据[key]）；
}
})
})
$（“#内容容器”）.html（内容）；
}
功能isObject（变量项）{
返回项的类型=='object'&&item！==null
}

因此，我的模板文件如下所示：

<div id="page-content">
    <h1>Citizens</h1>
    <div id="search-box">
        <h2>Search Citizens</h2>
        <input type="text" name="citizen_name">
    </div>
    {citizen_results}
    <div class="media">
        <div class="media-body">
            <h3>{firstname} {lastname}</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>{height}</li>
                <li><i class="fa fa-calendar"></i>{dateofbirth}</li>
                <li><i class="fa fa-mercury"></i>{sex}</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="{id}"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    {/citizen_results}
    {pagination}
</div>

<div id="page-content">
    <h1>Citizens</h1>
    <div id="search-box">
        <h2>Search Citizens</h2>
        <input type="text" name="citizen_name">
    </div>
    <div class="media">
        <div class="media-body">
            <h3>Elliot Stabler</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>180cm</li>
                <li><i class="fa fa-calendar"></i>12/01/70</li>
                <li><i class="fa fa-mercury"></i>M</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="1"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="media">
        <div class="media-body">
            <h3>Olivia Benson</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>180cm</li>
                <li><i class="fa fa-calendar"></i>03/15/78</li>
                <li><i class="fa fa-mercury"></i>F</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="2"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="media">
        <div class="media-body">
            <h3>John Munch</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>180cm</li>
                <li><i class="fa fa-calendar"></i>04/08//48</li>
                <li><i class="fa fa-mercury"></i>M</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="3"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    <ul>
      <li><a href="#">1</a></li>
    </ul
</div>


公民
搜查公民
{公民_结果}
{firstname}{lastname}

{height}
{出生日期}
{sex}


{/citizen_results}
{分页}

HTML的最终结果应该如下所示：

<div id="page-content">
    <h1>Citizens</h1>
    <div id="search-box">
        <h2>Search Citizens</h2>
        <input type="text" name="citizen_name">
    </div>
    {citizen_results}
    <div class="media">
        <div class="media-body">
            <h3>{firstname} {lastname}</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>{height}</li>
                <li><i class="fa fa-calendar"></i>{dateofbirth}</li>
                <li><i class="fa fa-mercury"></i>{sex}</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="{id}"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    {/citizen_results}
    {pagination}
</div>

<div id="page-content">
    <h1>Citizens</h1>
    <div id="search-box">
        <h2>Search Citizens</h2>
        <input type="text" name="citizen_name">
    </div>
    <div class="media">
        <div class="media-body">
            <h3>Elliot Stabler</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>180cm</li>
                <li><i class="fa fa-calendar"></i>12/01/70</li>
                <li><i class="fa fa-mercury"></i>M</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="1"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="media">
        <div class="media-body">
            <h3>Olivia Benson</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>180cm</li>
                <li><i class="fa fa-calendar"></i>03/15/78</li>
                <li><i class="fa fa-mercury"></i>F</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="2"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    <div class="media">
        <div class="media-body">
            <h3>John Munch</h3>
            <ul class="media-meta">
                <li><i class="fa fa-child"></i>180cm</li>
                <li><i class="fa fa-calendar"></i>04/08//48</li>
                <li><i class="fa fa-mercury"></i>M</li>
                <li><a href="#" data-event="loadCitizenProfile" data-resource-id="3"><i class="fa fa-eye"></i></a></li>
            </ul>
        </div>
    </div>
    <ul>
      <li><a href="#">1</a></li>
    </ul
</div>


公民
搜查公民
斯特布勒

180厘米
1970年1月12日
M


奥利维亚·本森

180厘米
1978年3月15日
F


约翰·芒奇

180厘米
04/08//48
M




如果你需要在你的网站上做很多不同的版本，可以使用模板脚本，比如handlebar.js，或者更现代的框架，比如React、Vue、Angular等等。我已经尝试了handlebar.js，但是它总是让我在上面写的HTML中出现一个无法识别的表达式错误。你知道为什么吗？HTML在我看来很好，但没有看到语法m修改以匹配预期的把手语法