Сборка частичной передачи данных в вложенные партиалы. - PullRequest
Новая
       27

Сборка частичной передачи данных в вложенные партиалы.

0 голосов
/ 04 января 2019

Я использую ассемблер.io, и я бы хотел все модулировать, используя принципы «атомного проектирования».

Допустим, я начинаю с пары отдельных атомов

частичный атом "title" (a-h2-title.html) 

<h2 class="{{additionalclasses}}">{{title}}</h2>

частичный атом "info text" (a-info-text.html) 

<div class="info {{additionalclasses}}">
   {{{text}}}
</div>

Насколько я понял, если я хочу использовать "экземпляры" этих общих компонентов с некоторыми данными, я могу определить их в файле json, как в этом примере:

info-text-example1.html 

{{>a-info-text info-text-example1}}

info-text-example1.json 

{
   "text":"<p>some text</p>",
   "additionalclasses"="info--modified"
}

Хорошо, теперь моя проблема в том, когда я хочунапример, для определения молекулы:

m-text-and-title.html 

<div class="box {{additionalclasses}}">
  {{>a-h2-title}}
  {{>a-info-text}}
</div>

Теперь, если я хочу "экземпляр" для этого элемента

text-and-title-example1.html 

{{>m-text-and-title ???}}

Как определить все данные для самого объекта (дополнительные классы) и для дочерних объектов?Надеюсь, я дал понять,

Я уже видел эту статью здесь, но я не могу адаптировать ее к своему делу. Спасибо за ваш ответ

1 Ответ

0 голосов
/ 06 января 2019

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

текст-и-титульный example1.html 

{{>m-text-and-title text-and-title-example1}}

текст-и-титульный example1.json 

{
  "additionalclasses": "text-and-title--modified",
  "title-example": {
    "title": "some title",
    "additionalclasses": "title-modified"
  },
  "text-example": {
    "text": "<p>some text</p>",
    "additionalclasses": "info--modified"
  }
}

Затем обновите молекулу, чтобы она была такой: 

<div class="box {{additionalclasses}}">
  {{>a-h2-title title-example}}
  {{>a-info-text text-example}}
</div>

Теперь это работает так же, как ваш первоначальный пример. У вас есть объект данных с указанными вами свойствами, а затем вы передаете эти свойства частям, которые будут их использовать. «Атомы» уже имеют общие, повторно используемые свойства, и вы можете изменить свою «молекулу», чтобы сделать то же самое ... например, изменить title-example на title и text-example на text, но оставить их как объекты, которые являются перешел к «атомам».

...