Повторно отображать шаблон Dust.js с новыми данными

Question

Повторно отображать шаблон Dust.js с новыми данными

0

Каким будет лучший способ повторного создания шаблона пыли, когда он будет продвигаться в файле данных, ссылаясь на него, а не просто повторяться с самого начала каждый раз. Например:

Скажем, у меня есть список людей 100+, хранящихся в JSON в переменной, называемой данными:

{
    "people": [
        {
            "name": "Jerry",
            "age": "17"
        },
        {
            "name": "Darcy",
            "age": "19"
        },
        {
            "name": "Jacob",
            "age": "25"
        },
        ... and so on for 100 or so people
    ]
}

И у меня есть этот файл template.tl, который экспортирует строку из трех имен/возрастов:

<div class="row">
    <div>{name} - {age}</div>
    <div>{name} - {age}</div>
    <div>{name} - {age}</div>
</div>

Что я перекомпилирую в template.js:

(function(){dust.register("template.tl",body_0);function body_0(chk,ctx){return chk.write("<div class=\"row\"><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div></div>");}return body_0;})();

Тогда у меня есть файл index.html, который выглядит так:

<html>
    <head>
    ...
    </head>

    <body>
        <div id="people"></div>

        <button id="load-more" type="button">Load More</button>
    </body>

    <script src="js/dust-core.min.js"></script>
    <script src="js/template.js"></script>
</html>

Каким будет лучший способ иметь это, каждый раз, когда нажимается кнопка, внутри <div id="people"></div> будет добавлена строка из трех человек, и каждый последующий щелчок будет загружать следующие три/тест для конца массива данных (можно предположить, что количество людей всегда кратно трем для моих нужд).

dougmacklin 13 май 2014, в 22:59

Источник

Теги:

jquery

dust.js

1 ответ

Ещё вопросы

Drahcir · Accepted Answer · 2014-05-15T15-26-00.000Z

Измените template.tl на:

<div class="row">
    {#.}
        <div>{.name} - {.age}</div>
    {/.}
</div>

Существует два преимущества изменения шаблона:

Вы можете передать любое количество people объектов, а не только 3.
Если в массиве осталось всего 2 элемента, они будут отображаться правильно.

JavaScript для выполнения рендеринга:

$('#load-more').on('click', function(){
    var next3 = data.people.splice(0, 3);

    if(next3.length == 0){
        return; // Array is empty
    }

    dust.render('template.tl', next3, function(err, str){
        if(str){
            $('#people').append(str);
        }
    });
});

Самая важная часть - data.people.splice(0, 3), это удаляет 3 элемента из массива и возвращает их - см. Array.prototype.splice().

Остальная часть кода - это просто JQuery, чтобы добавить прослушиватель событий и вставить визуализированный шаблон.

Повторно отображать шаблон Dust.js с новыми данными

1 ответ

Измените template.tl на:

JavaScript для выполнения рендеринга:

JSFiddle

Ещё вопросы