PHP Усы - несколько частичных

Question

Я нашел эту скрипку, которая показывает, как включить несколько частей в шаблон Усы: http://jsfiddle.net/YW5zF/3/

Я пытаюсь преобразовать это в PHP Усы, и у меня возникли некоторые трудности.Кто-нибудь может помочь здесь?

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

Вот мой основной шаблон (contact.mustache):

<form id="contact-form" method="post" action="contact.php" role="form">
    <div class="messages"></div>
    <div class="controls">
        <div class="row">
            <div class="col-md-6">
                {{>input}}
            </div>
            <div class="col-md-6">
                {{>input}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                {{>input}}
            </div>
            <div class="col-md-6">
                {{>input}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                {{>textarea}}
            </div>
            <div class="col-md-12">
                <input type="submit" class="btn btn-success btn-send" value="Send message">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
            </div>
        </div>
    </div>
</form>

Вот мой частичный ввод (input.mustache):

{{#input}}
    <div class="{{div_class}}">
        <label class="{{label_class}}" for="{{id}}">{{text}}</label>
        <input type="{{type}}" id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" {{required}} data-error="{{data-error}}">
        <div class="{{line_class}}"></div>
    </div>
{{/input}}

Вот мой шаблон textarea (textarea.mustache)

{{#textarea}}
    <div class="{{div_class}}">
        <label class="{{label_class}}" for="{{id}}">{{text}}</label>
        <textarea id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" rows="{{rows}}" {{required}} data-error="{{data-error}}"></textarea>
        <div class="{{line_class}}"></div>
    </div>
{{/textarea}}

Вот мой PHP-код для его рендеринга:

<?php

require_once __DIR__ . '/vendor/autoload.php';

$m = new Mustache_Engine;
    $data = array(
                    0 =>array(
                        "div_class"=>"form-group", 
                        "id"=>"form_name",
                        "type"=>"text",
                        "name"=>"name",
                        "placeholder"=> "Please enter your firstname *",
                        "required"=>"required='required'"
                        "data-error"=>"Firstname is required.",
                        "input_class"=>"form-control", 
                        "label_class"=>"floating-label",
                        "text"=>"Firstname *",
                        "line_class"=>"line-ripple",
                    ),
                    1=> array(
                        "div_class"=>"form-group", 
                        "id"=>"form_lastname",
                        "type"=>"text",
                        "name"=>"surname",
                        "placeholder"=> "Please enter your lastname *",
                        "required"=>"required='required'"
                        "data-error"=>"Lastname is required.",
                        "input_class"=>"form-control", 
                        "label_class"=>"floating-label",
                        "text"=>"Lastname *",
                        "line_class"=>"line-ripple",
                    ),
                    2 =>array(
                        "div_class"=>"form-group", 
                        "id"=>"form_email",
                        "type"=>"email",
                        "name"=>"email",
                        "placeholder"=> "Please enter your email *",
                        "required"=>"required='required'"
                        "data-error"=>"Valid email is required.",
                        "input_class"=>"form-control", 
                        "label_class"=>"floating-label",
                        "text"=>"Email *",
                        "line_class"=>"line-ripple",
                    ),
                    3 =>array(
                        "div_class"=>"form-group", 
                        "id"=>"form_phone",
                        "type"=>"tel",
                        "name"=>"phone",
                        "placeholder"=> "Please enter your phone",
                        "input_class"=>"form-control", 
                        "label_class"=>"floating-label",
                        "text"=>"Phone",
                        "line_class"=>"line-ripple",
                    ),
                    4 =>array(
                        "div_class"=>"form-group", 
                        "id"=>"form_message",
                        "name"=>"message",
                        "placeholder"=> "Message for me *",
                        "required"=>"required='required'"
                        "data-error"=>"Please,leave us a message.",
                        "input_class"=>"form-control", 
                        "label_class"=>"floating-label",
                        "rows"=>4,
                        "text"=>"Message *",
                        "line_class"=>"line-ripple",
                    )
      );

// main templates in the /views folder, partials in the /views/partials folder
$m = new Mustache_Engine(array(
    'loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__) . '/views'),
    'partials_loader' => new Mustache_Loader_FilesystemLoader(dirname(__FILE__) . '/views/partials'),
));

// loads template from `views/contact.mustache` and renders it.
echo $m->render("contact", $data);

Текущие результаты этого скрипта:

<form id="contact-form" method="post" action="contact.php" role="form">
    <div class="messages"></div>
    <div class="controls">
        <div class="row">
            <div class="col-md-6">
                    <div class="form-group">
                        <label class="floating-label" for="form_name">Firstname *</label>
                        <input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_lastname">Lastname *</label>
                        <input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_email">Email *</label>
                        <input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_phone">Phone</label>
                        <input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone"  data-error="">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_message">Message *</label>
                        <input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
                        <div class="line-ripple"></div>
                    </div>
            </div>
            <div class="col-md-6">
                    <div class="form-group">
                        <label class="floating-label" for="form_name">Firstname *</label>
                        <input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_lastname">Lastname *</label>
                        <input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_email">Email *</label>
                        <input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_phone">Phone</label>
                        <input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone"  data-error="">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_message">Message *</label>
                        <input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
                        <div class="line-ripple"></div>
                    </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                    <div class="form-group">
                        <label class="floating-label" for="form_name">Firstname *</label>
                        <input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_lastname">Lastname *</label>
                        <input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_email">Email *</label>
                        <input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_phone">Phone</label>
                        <input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone"  data-error="">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_message">Message *</label>
                        <input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
                        <div class="line-ripple"></div>
                    </div>
            </div>
            <div class="col-md-6">
                    <div class="form-group">
                        <label class="floating-label" for="form_name">Firstname *</label>
                        <input type="text" id="form_name" name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_lastname">Lastname *</label>
                        <input type="text" id="form_lastname" name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_email">Email *</label>
                        <input type="email" id="form_email" name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_phone">Phone</label>
                        <input type="tel" id="form_phone" name="phone" class="form-control" placeholder="Please enter your phone"  data-error="">
                        <div class="line-ripple"></div>
                    </div>
                    <div class="form-group">
                        <label class="floating-label" for="form_message">Message *</label>
                        <input type="" id="form_message" name="message" class="form-control" placeholder="Message for me *" required='required' data-error="Please,leave us a message.">
                        <div class="line-ripple"></div>
                    </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
            </div>
            <div class="col-md-12">
                <input type="submit" class="btn btn-success btn-send" value="Send message">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
            </div>
        </div>
    </div>
</form>

Почему он не делает это правильно?

РЕДАКТИРОВАТЬ Наконец-то все заработалоизменения перечислены ниже ...

Вот contact.mustache

<form id="contact-form" method="post" action="contact.php" role="form">
    <div class="messages"></div>
    <div class="controls">
        {{>input}}
        {{>textarea}}
        <div class="col-md-12">
            <input type="submit" class="btn btn-success btn-send" value="Send message">
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
            </div>
        </div>
    </div>
</form>

Вот input.mustache

{{#input}}
<div class="row">
    <div class="col-md-6">
        <div class="{{div_class}}">
            <label class="{{label_class}}" for="{{id}}">{{text}}</label>
            <input type="{{type}}" id="{{id}}"    name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" {{required}} data-error="{{data-error}}">
            <div class="{{line_class}}"></div>
        </div>
    </div>
</div>
{{/input}}

Вот здесь textarea.mustache

{{#textarea}}
<div class="row">
    <div class="col-md-12">
        <div class="{{div_class}}">
            <label class="{{label_class}}" for="{{id}}">{{text}}</label>
            <textarea id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" rows="{{rows}}" {{required}} data-error="{{data-error}}"></textarea>
            <div class="{{line_class}}"></div>
        </div>
    </div>
</div>
{{/textarea}}

Вот массив данных (код остается прежним):

$data = array(
    "input"=>array(
                0 =>array(
                    "div_class"=>"form-group", 
                    "id"=>"form_name",
                    "type"=>"text",
                    "name"=>"name",
                    "placeholder"=> "Please enter your firstname *",
                    "required"=>"required='required'",
                    "data-error"=>"Firstname is required.",
                    "input_class"=>"form-control", 
                    "label_class"=>"floating-label",
                    "text"=>"Firstname *",
                    "line_class"=>"line-ripple",
                ),
                1=> array(
                    "div_class"=>"form-group", 
                    "id"=>"form_lastname",
                    "type"=>"text",
                    "name"=>"surname",
                    "placeholder"=> "Please enter your lastname *",
                    "required"=>"required='required'",
                    "data-error"=>"Lastname is required.",
                    "input_class"=>"form-control", 
                    "label_class"=>"floating-label",
                    "text"=>"Lastname *",
                    "line_class"=>"line-ripple",
                ),
                2 =>array(
                    "div_class"=>"form-group", 
                    "id"=>"form_email",
                    "type"=>"email",
                    "name"=>"email",
                    "placeholder"=> "Please enter your email *",
                    "required"=>"required='required'",
                    "data-error"=>"Valid email is required.",
                    "input_class"=>"form-control", 
                    "label_class"=>"floating-label",
                    "text"=>"Email *",
                    "line_class"=>"line-ripple",
                ),
                3 =>array(
                    "div_class"=>"form-group", 
                    "id"=>"form_phone",
                    "type"=>"tel",
                    "name"=>"phone",
                    "placeholder"=> "Please enter your phone",
                    "input_class"=>"form-control", 
                    "label_class"=>"floating-label",
                    "text"=>"Phone",
                    "line_class"=>"line-ripple",
                ),
            ),
"textarea"=>array(
                0 =>array(
                    "div_class"=>"form-group", 
                    "id"=>"form_message",
                    "name"=>"message",
                    "placeholder"=> "Message for me *",
                    "required"=>"required='required'",
                    "data-error"=>"Please,leave us a message.",
                    "input_class"=>"form-control", 
                    "label_class"=>"floating-label",
                    "text"=>"Message *",
                    "rows"=>4,
                    "line_class"=>"line-ripple",
                ),
            )
  );

Вот вывод:

<form id="contact-form" method="post" action="contact.php" role="form">
    <div class="messages"></div>
    <div class="controls">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="floating-label" for="form_name">Firstname *</label>
                    <input type="text" id="form_name"    name="name" class="form-control" placeholder="Please enter your firstname *" required='required' data-error="Firstname is required.">
                    <div class="line-ripple"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="floating-label" for="form_lastname">Lastname *</label>
                    <input type="text" id="form_lastname"    name="surname" class="form-control" placeholder="Please enter your lastname *" required='required' data-error="Lastname is required.">
                    <div class="line-ripple"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="floating-label" for="form_email">Email *</label>
                    <input type="email" id="form_email"    name="email" class="form-control" placeholder="Please enter your email *" required='required' data-error="Valid email is required.">
                    <div class="line-ripple"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="floating-label" for="form_phone">Phone</label>
                    <input type="tel" id="form_phone"    name="phone" class="form-control" placeholder="Please enter your phone"  data-error="">
                    <div class="line-ripple"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label class="floating-label" for="form_message">Message *</label>
                    <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required='required' data-error="Please,leave us a message."></textarea>
                    <div class="line-ripple"></div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <input type="submit" class="btn btn-success btn-send" value="Send message">
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
            </div>
        </div>
    </div>
</form>

Answer 1

Что на самом деле помогло
Функция рендеринга в PHP, кажется, имеет только два параметра, в отличие от Javascript.Поэтому удаление третьего параметра и переименование {{> objPartial}} в {{> input}}, чтобы он соответствовал файлу, должно заставить его работать с рендерером PHP.

Кроме того, каждый раз, когда встречается частичное вОсновной шаблон, он будет смотреть на данные, которые ему даны, и создавать код из парциального для каждого индекса массива.То, как работает ваш код, будет работать идеально, если каждое появление части будет отображаться только для одного элемента массива.

На данный момент, вы уже почти приступили к работе, просто нужно настроить еще пару вещей..

{{#input}}
 <div class="col-md-6">
  <div class="{{div_class}}">
   <label class="{{label_class}}" for="{{id}}">{{text}}</label>
   <input type="{{type}}" id="{{id}}" name="{{name}}" class="{{input_class}}" placeholder="{{placeholder}}" {{required}} data-error="{{data-error}}">
   <div class="{{line_class}}"></div>
  </div>
{{/input}}

А в основном шаблоне просто есть одна ссылка на {{> input}}.

<form id="contact-form" method="post" action="contact.php" role="form">
    <div class="messages"></div>
    <div class="controls">
        <div class="row">
           {{>input}}
        </div>
        <div class="row">
            <div class="col-md-12">
                {{>textarea}}
            </div>
            <div class="col-md-12">
                <input type="submit" class="btn btn-success btn-send" value="Send message">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> These fields are required.</p>
            </div>
        </div>
    </div>
</form>

Существует способ сохранить формат одного div строки на дваэлементы, но с помощью столбцов начальной загрузки это не требуется, если вы не выполняете какое-либо специальное форматирование.

Старый ответ (сохраняется в случае, если это полезно для кого-то другого)
ЕстьНебольшой твик, который, я считаю, сделает эту работу.Вместо того, чтобы вызывать частичное для каждого фрагмента контента, вызовите его один раз для всего массива контента.Ваш массив $ data должен был бы немного отличаться, поэтому вот что я вижу:

$data = array(
  "input"=>array(
    array(
      "div_class"=>"text-field", "id"=>"firstName",
      "input_class"=>"text-field__input", "label_class"=>"floating-label",
      "line_class"=>"line-ripple", "text"=>"Curly"
     )
    ),
    array(
       "div_class"=>"text-field", "id"=>"lastName",
       "input_class"=>"text-field__input",
       "label_class"=>"floating-label",
       "line_class"=>"line-ripple", "text"=>"Athos"
    )
  )
);

И ваша частичная часть будет немного изменена, чтобы включить .col-md-6:

{{#input}}
<div class="col-md-6">
  <div class="{{div_class}}">
    <input type="text" id="{{id}}" class="{{input_class}}">
    <label class="{{label_class}}" for="{{id}}">{{text}}</label>
    <div class="{{line_class}}"></div>
  </div>
</div>
{{/input}}

Затем вы можете заменить

<div class="row">
    <div class="col-md-6">
        {{#firstname}}
            {{>objPartial}}
        {{/firstname}}
    </div>
    <div class="col-md-6">
        {{#lastname}}
            {{>objPartial}}
        {{/lastname}}
    </div>
</div>

на

<div class="row">
  {{>objPartial}}
</div>