19

Mustacheで、子セクションにいる間に親セクションから変数を読み取ることは可能ですか？

たとえば、以下の例では、{{order_store.id}}がその親から変数を読み取るようにします$ order_store [（現在の子ループの配列インデックス）] ['id']

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

サンプルデータ（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'
                        ),
                    ),
                ));
4

6 に答える 6

8

Mustacheでは、親オブジェクトを参照することはできません。子セクション内に表示するデータはすべて、子配列に含まれている必要があります。

例えば：

$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'
        ),
    ),
));

次に、タグを使用できます{{order_store_id}}。

この場合、ドット表記は役に立ちません。魔法のように親配列にアクセスすることはできません。（ちなみに、ドット表記はすべての口ひげパーサーでサポートされているわけではないため、将来、テンプレートを別のプログラミング言語で再利用する可能性がある場合は、ドット表記を使用しないことをお勧めします。）

于 2010-12-11T01:25:21.643 に答える
8

テンプレートをクライアント側でコンパイルする場合、別のオプションは、Mustacheと互換性のあるHandlebarsJSテンプレートを使用し、親表記を使用することです。

{{../order_store.id}}
于 2011-12-13T19:44:24.950 に答える
3

一部のMustacheパーサーでは、{{order_store.id}}が必要です。

古典的な例はSwaggerCodegenです。各変数の「name」プロパティは、モデルの「name 」プロパティを上書きします。この場合{{../model.name}}、エラーが発生します。私はそれを次のように回避します：

{{name}} // model (parent) name value
{{#vars}}
    {{model.name}} // model (parent) name value
    {{name}}       // vars (child) name valu
{{/vars}}
于 2018-12-07T04:39:13.853 に答える
2

クイックアンサー：はい、いいえ。

  • いいえ、上がることはできません（AFAIK）。
  • はい、親要素にアクセスできます。しかし、下からではなく、上から。

参照できる親要素ですべてをラップする必要があります。この場合は「本」。

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

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}}
于 2021-01-27T00:17:32.820 に答える
1

nullではない空のオブジェクトで同じ問題が発生しました

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

ご覧のとおり、「if」ステートメントのpicture.src値でpicture.idを使用できます。

于 2012-07-27T12:34:24.037 に答える
0

java mustacheの場合、子スコープの親スコープのフィールドにスラッシュやドットを付けずに名前を付けることができます。子スコープにそのようなフィールドがない場合は、親で検索しようとします。

データ構造：

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

レンプレート：

{{#pages}}
  <div>{{content}}</div>
  <footer>{{footer}}</footer> <-- that will pull 'footer' field from parent scope
{{/pages}}
于 2020-07-30T14:50:09.480 に答える