Глоток, Усы.Как объединить данные с атрибутом src? - PullRequest
Новая
       26

Глоток, Усы.Как объединить данные с атрибутом src?

0 голосов
/ 01 октября 2018

Я использую плагин gulp-html-i18n gulp для обработки задачи перевода на статическом веб-сайте.

Для отображения переведенного содержимогоЯ должен использовать Усы lib как gulp-html-i18n , упомянутые в его документ .

Я сталкиваюсь с трудностями в операциях конкатенации.Например, если мне нужно назначить условный класс для элемента html, я буду использовать следующий поток: 

${{! if}}$
 ${{#index.isEnglish}}$
<body class="en">
 ${{/index.isEnglish}}$
${{! else}}$
 ${{^index.isEnglish}}$
<body class="sp">
 ${{/index.isEnglish}}$

В приведенном выше коде я проверяю, является ли язык, например, английский,затем класс назначается на основе значения isEnglish .

При таком подходе мы столкнемся с большой проблемой, если мне потребуется добавить новый язык, также он длинный и не полный.

Кроме того, предположим, у меня есть массив объектов в следующем интерфейсе: 

"data":[{
 "title": "foo",
 "description": "bar",
 "icon": "iconname"
},...]

Что если мне понадобится объединить имя значка с путем атрибута scr при циклическом прохождениимассив выше? 

<div class="content">
    ${{#index.home.services.data}}$
    <h3>
        ${{title}}$
    </h3>
    <p>
        ${{description}}$
    </p>
    <img src="path/${{}}$.png" alt=""> ---> Not working with Moustache
    ${{/index.home.services.data}}$
</div>

Так, как я могу решить проблемы выше?и каковы лучшие практики для конкатенаций Moustache.js?

1 Ответ

0 голосов
/ 09 октября 2018

Sloved!

Решено с помощью скриптов типа text / template .

Мы не можем выполнить оператор конкатенации непосредственно внутриАтрибут html, мы должны написать его внутри скрипта типа text / template .как в следующем примере: 

<script type="text/template" id="header">
    ${{#index.pages}}$
    <button>
        <a href="./${{fileName}}$"></a>
        ${{title}}$
    </button>
    ${{/index.pages}}$
</script>

Затем визуализируйте содержимое скрипта и назначьте его определенному элементу html, используя следующий код JavaScript: 

var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate);
$('#navBar').html(headerHtml);

Примечание: знаки доллараиспользуется на основе плагина gulp для задачи локализации gulp-html-i18n , чтобы связать файл json с усами.

Если я не использую упомянутый плагин, я должен обновить свой код, чтобы он стал: 

var headerTemplate = $('#header').html();
var headerHtml = Mustache.to_html(headerTemplate,'path to data');
$('#navBar').html(headerHtml);

Одна из самых полезных ссылок здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...