#7 October CMS - Bootstrap & partial

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">&times;</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">&times;</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>

Добавить отзыв (пожелание, комментарий)