Использование mustache.js в сочетании с mustache.php - PullRequest
Новая
       37

Использование mustache.js в сочетании с mustache.php

2 голосов
/ 08 августа 2011

Я использую mustache.php (KOstache Коханы), чтобы заполнить значения моей формы постоянством. Мой шаблон примерно такой: 

<input type="checkbox" id="copy-billing-address"><span>My billing address is the same as my shipping address</span><br />

<label for="project[billing-organization]" class="pb-label">Organization:</label> <input type="text" name="project[billing-organization]" value="{{#field_data}}{{billing-organization}}{{/field_data}}"  />
{{#errors}}{{#billing-organization}}<span class="validation-error">{{billing-organization}}</span>{{/billing-organization}}{{/errors}}

<label for="project[billing-address-1]" class="pb-label">Address:</label> <input type="text" name="project[billing-address-1]" value="{{#field_data}}{{billing-address-1}}{{/field_data}}"  />

{{#errors}}{{#billing-address-2}}<span class="validation-error">{{billing-address-2}}</span>{{/billing-address-2}}{{/errors}}

<label for="project[billing-city]" class="pb-label">City:</label> <input type="text" name="project[billing-city]" value="{{#field_data}}{{billing-city}}{{/field_data}}"  />
{{#errors}}{{#billing-city}}<span class="validation-error">{{billing-city}}</span>{{/billing-city}}{{/errors}}

и т.д ...

Мне любопытно узнать, есть ли способ / как лучше всего получить и использовать данные усов, которые PHP возвращает, чтобы заполнить значения шаблона. Например: 

<?php $view->jsondata = json_encode($array); ?>

//javascript
var template = $("#billing-address").innerHtml();
var data = {{jsondata}}
html = Mustache.to_html(template, data);
template.innerHtml(html);

Как я могу отправить {{jsondata}} на мой javascript с помощью mustache.php?

1 Ответ

2 голосов
/ 09 августа 2011

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

в php вы делаете следующее: (простите, я не знаком с синтаксисом php) 

<script>
var globalData= <?php //out json_encode($array); ?></script>

и ваш шаблон должен находиться в теге script следующим образом: 

<script id="billing-address" type="tmpl/js" >
<input type="checkbox" id="copy-billing-address"><span>My billing address is the same as my shipping address</span><br />

<label for="project[billing-organization]" class="pb-label">Organization:</label> <input type="text" name="project[billing-organization]" value="{{#field_data}}{{billing-organization}}{{/field_data}}"  />
{{#errors}}{{#billing-organization}}<span class="validation-error">{{billing-organization}}</span>{{/billing-organization}}{{/errors}}

<label for="project[billing-address-1]" class="pb-label">Address:</label> <input type="text" name="project[billing-address-1]" value="{{#field_data}}{{billing-address-1}}{{/field_data}}"  />

{{#errors}}{{#billing-address-2}}<span class="validation-error">{{billing-address-2}}</span>{{/billing-address-2}}{{/errors}}

<label for="project[billing-city]" class="pb-label">City:</label> <input type="text" name="project[billing-city]" value="{{#field_data}}{{billing-city}}{{/field_data}}"  />
{{#errors}}{{#billing-city}}<span class="validation-error">{{billing-city}}</span>{{/billing-city}}{{/errors}}
</script>

<div id="123"> </div> //div that you want to insert the markup tp

$(document).ready(function(){
    var template = $("#billing-address").html();  //use jquery methods when possible
    html = Mustache.to_html(template, globalData);
    $("#123").html(html); 
});

и тебе хорошо идти.

Способ XHR с использованием метода Jquery ajax . 

$.ajax(
{
url: "getJson.php",
data: {id:123}, // data optional,
type: "GET",  //or POST depending on what you need
dataType:"json", //data you are receiving from server
success: function(jsonData)
{
var template = $("#billing-address").html();  //use jquery methods when possible
html = Mustache.to_html(template, jsonData);
$("#123").html(html);
}
});
...