代码之家  ›  专栏  ›  技术社区  ›  MB34

php mustache-多个部分

mustache.php mustache php
  •  0
  • MB34  · 技术社区  · 8 年前

    我发现了这个小提琴,它显示了如何在胡子模板中包含多个部分: 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}}

    这是我的文本区域模板(textfarea.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>

    为什么做得不对?

    编辑最终使其工作,更改如下所列…

    这是联系人,胡子。 

    <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>

    这是输入.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}}

    这是textfarea.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>
    1 回复  |  直到 8 年前
        1
  •  1
  •   D. Kendall    8 年前

    实际上有什么帮助
    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}}

    在主模板中,只有一个对>输入的引用。 

    <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>
    推荐文章
    Oladipo nitin aditya  ·  用小胡子遍历数组数组
    9 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号