开发者

Mustache: read variables from parent section in child section

Is it possible in Mustache to read variable from parent section while in child section?

for instance my example below, I want the {{order_store.id}} to read variable from it's parent $order_store[(array index of current child loop)]['id']

the template.mustache

{{#order_store}}<table>
    <caption>
        Store Name: {{name}}
        Product Ordered: {{products}}
        Product Weights: {{products_weight}}
    </caption>
    <tbody>
        {{#shipping_method}}<tr>
            <td>
                <input type="radio" name="shipping[{{order_store.id}}]" id="shipping-{{id}}" value="{{id}}" /> 
                <label for="shipping-{{id}}">{{name}}</label>
            </td>
            <td>{{description}}</td>
            <td>{{price}}</td>
        </tr>{{/shipping_method}}
    </tbody>
</table>{{/order_store}}

sample data (in PHP);

              开发者_运维问答  $order_store => array(
                array(
                    'id' => 1,
                    'name' => 'Kyriena Cookies',
                    'shipping_method' => array(
                        array(
                            'id' => 1,
                            'name' => 'Poslaju',
                            'description' => 'Poslaju courier'
                        ),
                        array(
                            'id' => 2,
                            'name' => 'SkyNET',
                            'description' => 'Skynet courier'
                        ),
                    ),
                ));


Mustache doesn't allow you to refer to parent objects. Any data you want to display while within the child section needs to be contained in the child array.

For example:

$order_store => array(
array(
    'id' => 1,
    'name' => 'Kyriena Cookies',
    'shipping_method' => array(
        array(
            'id' => 1,
            'name' => 'Poslaju',
            'description' => 'Poslaju courier',
            'order_store_id' => '1'
        ),
        array(
            'id' => 2,
            'name' => 'SkyNET',
            'description' => 'Skynet courier',
            'order_store_id' => '1'
        ),
    ),
));

Then you can use the tag {{order_store_id}}.

Dot notation wouldn't help in this case -- it won't magically give you access to the parent array. (By the way, dot notation isn't supported by all mustache parsers, so it's probably best to avoid using it if there's any chance you'll want to reuse your templates with another programming language in the future.)


If the template is to be compiled on the client side, another option is to use HandlebarsJS templates, which are compatible with Mustache, and use the parent notation:

{{../order_store.id}}


For some Mustache parsers, {{order_store.id}} is required.

A classic example is SwaggerCodegen. Each variable's "name" property overwrites the model's "name" property. In this case {{../model.name}} causes an error. I get around it with the following:

{{name}} // model (parent) name value
{{#vars}}
    {{model.name}} // model (parent) name value
    {{name}}       // vars (child) name valu
{{/vars}}


Quick answer: Yes and no.

  • No, you can't go up (AFAIK).
  • Yes, you can access parent elements. But from the top level, instead of from the bottom.

You need to wrap it all with a parent element you can reference. 'book' in this case.

var data = { 
"book":{
    title: "The big book",
    author: "Book author",
    chapters: [
       { title: "Hat", color: "black", author: "Chapter 1 author" },
       { title: "Cat", color: "red", author: "Chapter 2 author" }
       ]
   } 
}

var template = document.body.innerHTML;
document.body.innerHTML = Mustache.render(template, data);
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>

{{#book}}
<ul>
    
    Here we have a book titled "{{title}}" with different chapters:
    {{#chapters}}<br><br>
    
    <li>
        Title: {{title}} <br/> 
        Color: {{color}} <br/>
        Chapter Author: {{author}} <br/> 
        
        -- Book Author: {{book.author}} -- <br/> 
    </li>
    {{/chapters}}
</ul>
<span>Author: {{author}}</span>

{{/book}}

Play around with http://jsfiddle.net/pwts7kqx/

<br> Bonus track. Indexed and nested indexing
<br> Title of 1st chapter: {{book.chapters.0.title}}
<br> Title of 2nd chapter: {{book.chapters.1.title}}


I had the same problem, with empty object which is not null

<div class="photo">
    {{#picture.id}}
        <img src="{{picture.src}}" alt="{{picture.name}}" />
    {{/picture.id}}
</div>

as you can see I can use picture.id in "if" statement picture.src value


for java mustache you can just name field from parent scope in child scope without any slashes or dots, and if there is no such field in child scope it will try to find it in parent.

data structure:

report: {
  footer: 'hello',
  pages: [{
    content: 'blah'    
  }]
}

template:

{{#pages}}
  <div>{{content}}</div>
  <footer>{{footer}}</footer> <-- that will pull 'footer' field from parent scope
{{/pages}}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜