Mustacheのオブジェクト一覧

Question

私はひげそりテンプレートエンジンからHTMLをレンダリングしています。

オブジェクトのリストを扱う際にレンダリングに悩まされています。ここで

は私の物である：

var template='{{#Prod}} {{name}} and {{category}} {{/Prod}}' 

Mustache.render(template, {"Prod":Prod}); 

しかし、それは動作していない、と私は理由を理解していない。ここで

var Prod={ 
    "Object1": { 
    "name": "name1", 
    "category": "laptop" 
    }, 
    "Object2": { 
    "name": "name2", 
    "category": "laptop" 
    }, 
    "Object3": { 
    "name": "name3", 
    "category": "Desktop" 
    }, 
    "Object4": { 
    "name": "name4", 
    "category": "Mobile" 
    } 
} 

は私からレンダリングしようとしているものです。

私が間違っている場所を教えてください。

Answer 1

あなたはリスト機能の自動反復の配列は、中キックする製品のリストを作成する必要があります。必要はありませんなどのキーObject1、Object2、Object3でアクセスでき、各製品、

を持たないように編集：あなたがオブジェクト形式を変更できない場合、あなたはObject.keysとArray#mapを使用してかなり簡単に他に一つのフォーマットを変えることができます：

var Prod={ 
 
    "Object1": { 
 
    "name": "name1", 
 
    "category": "laptop" 
 
    }, 
 
    "Object2": { 
 
    "name": "name2", 
 
    "category": "laptop" 
 
    }, 
 
    "Object3": { 
 
    "name": "name3", 
 
    "category": "Desktop" 
 
    }, 
 
    "Object4": { 
 
    "name": "name4", 
 
    "category": "Mobile" 
 
    } 
 
} 
 

 
var products = Object.keys(Prod).map(function (k) { return this[k] }, Prod) 
 

 
document.body.innerHTML = Mustache.render('\ 
 
<ul>\ 
 
    {{#products}}\ 
 
    <li>{{name}} and {{category}}</li>\ 
 
    {{/products}}\ 
 
</ul>\ 
 
', { products: products })

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

Answer 2

Prodはオブジェクトであり、リストではないようです。

コードを次のように変更しても、動作するはずです。

var Prod = [ 
    { 
    "name": "name1", 
    "category": "laptop" 
    }, 
    { 
    "name": "name2", 
    "category": "laptop" 
    }, 
    { 
    "name": "name3", 
    "category": "Desktop" 
    }, 
    { 
    "name": "name4", 
    "category": "Mobile" 
    } 
} 

var template='{{#Prod}} {{name}} and {{category}} {{/Prod}}' 

Mustache.render(template, { "Prod":Prod});