堆棧內存溢出
  簡體   English   中英

PHP胡子-多個局部

[英]PHP Mustache - multiple partials

 原文  2018-05-24 14:29:30  3   1    php/ mustache/ mustache.php

問題描述

我發現了這個小提琴，該小提琴顯示了如何在Mustache模板中包括多個部分： http : //jsfiddle.net/YW5zF/3/

我正在嘗試將其轉換為PHP Mustache並遇到一些困難。 有人可以幫忙嗎？

本質上，我試圖了解如何在一個模板中多次重用輸入模板。

這是我的主要模板（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>

1 個解決方案

解決方案1
 1 已采納  2018-05-24 14:51:53

實際有什么幫助
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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 PHP Mustache動態局部和局部集合 使用Mustache PHP，加載部分內容但不解析標簽 嘗試在mustache.php中調用局部函數 是否可以讓Moustache（php）局部變量包含自己的數據？ 如何使用類似PHP庫的加載器加載Moustache模板/部分？ PHP中的胡子部分 - 如何使用它們？ Mustache partials和代碼重用 如何使用mustache.php和mustache部分傳遞來自不同來源的數據？ 在PHP中使用Mustache變量 mustache.php安全
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM