October CMS - создание компонент
В этом видеоуроке мы внесём немного bootstrap-а в наш html код дабы наш Todo List выглядел симпатичнее.
Функционал оставляем без изменений и орамляем наши коды bootstrap-ом.
Файл default.htm
{% set tasks = __SELF__.tasks %}
<form>
<div class="panel panel-default">
<div class="panel-heading">
<h1>Task assigned to: {{ __SELF__.name }}</h1>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" id="newItem" name="newTask" value="" class="form-control"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Add</button>
</span>
</div>
<ul class="list-group" id="result">
{% for task in tasks %}
<li class="list-group-item">
{{task}}
<button class="close pull-right">×</button>
</li>
{% endfor %}
</ul>
</div>
</div>
</form>
Теперь давайте оптимизируем шаблон default.htm. Создадим новый partial и вынесем в него вывод задач.
Переходим в папку компонента и рядом с default.htm создаем tasks.htm со следующим содержимым:
<ul class="list-group" id="result">
{% for task in tasks %}
<li class="list-group-item">
{{task}}
<button class="close pull-right">×</button>
</li>
{% endfor %}
</ul>
А файл default.htm будет иметь вид:
{# set tasks = __SELF__.tasks #}
<form>
<div class="panel panel-default">
<div class="panel-heading">
<h1>Task assigned to: {{ __SELF__.name }}</h1>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" id="newItem" name="newTask" value="" class="form-control"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Add</button>
</span>
</div>
{% partial __SELF__ ~ '::tasks' tasks=__SELF__.tasks %}
</div>
</div>
</form>
