Блог

В моем приложении есть файлы шаблонов, которые я хотел бы обработать с помощью 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' amp;amp; 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>
  

И конечный результат HTML должен выглядеть так:

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

Я не совсем уверен, что делать с кодом внутри $.each(data, function(k, v)