Mustache.js: Ulangi pasangan kunci/nilai objek?

Dibuat pada 28 Mei 2015  ·  11Komentar  ·  Sumber: janl/mustache.js

Apakah mungkin untuk mengulangi pasangan kunci/nilai suatu objek?

Pertimbangkan contoh ini:

var values = {
  'single': 'Single bed',
  'double': 'Double bed',
  'twin': 'Twin beds'
};

Kode stang.js yang setara:

<select name="bed_type">
{{#values}}
  <option value="{{@key}}">{{this}}</option>
{{/values}}
</select>

Saya tidak menemukan cara untuk melakukannya dengan mustache.js

Terima kasih.

Komentar yang paling membantu

Apakah mengizinkan iterasi pada objek sederhana benar-benar memperkenalkan logika ke dalam tampilan kumis? Argumen saya adalah tidak. Saya penggemar prinsip tanpa logika, tetapi kita sudah dapat mengulangi array, saya setuju dengan OP bahwa ini tidak perlu canggung. Perhatikan contoh berikut:

Saya ingin data saya menjadi:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

Tapi itu harus:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

Untuk membuat:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

Semua 11 komentar

Hai @chlab!

Alih-alih meneruskan data Anda langsung ke perender, Anda harus memformatnya menjadi objek view . Atau gunakan pembantu khusus. Ada beberapa ide tentang utas stackoverflow ini:

http://stackoverflow.com/questions/9058774/handbars-mustache-is-there-a-built-in-way-to-loop-through-the-properties-of
http://stackoverflow.com/questions/9981907/how-to-iterate-over-a-hash-in-mustache-js

Beri tahu kami jika masih belum jelas. Bersulang!

Terima kasih @dasilvacontin.
Itu sepertinya cara yang cukup canggung untuk melakukan itu, bukan? Apa alasan di balik ini? Bukankah lebih sederhana dengan cara stang?
Bersulang

@chlab Ini adalah prinsip dasar Kumis. Semua logika harus diekstraksi menjadi tampilan, yang tidak sama dengan template. Dalam hal ini, tampaknya lebih canggung karena hanya sedikit logika, tetapi itu adalah lereng licin yang bahkan tidak membiarkan Anda turun dari Kumis :)

Cukup adil. Terima kasih atas penjelasannya!

Prinsip dasar yang awalnya disebut, membuat Kumis terlalu berpendirian, saya tidak selalu ingin mengatur fase konversi terpisah untuk membuat Kumis bahagia...

Apakah mengizinkan iterasi pada objek sederhana benar-benar memperkenalkan logika ke dalam tampilan kumis? Argumen saya adalah tidak. Saya penggemar prinsip tanpa logika, tetapi kita sudah dapat mengulangi array, saya setuju dengan OP bahwa ini tidak perlu canggung. Perhatikan contoh berikut:

Saya ingin data saya menjadi:

"attr": {
  "class": "foo",
  "href": "/somewhere"
}

Tapi itu harus:

"attr": [
  {
    "key": "class",
    "value": "foo"
  },
  {
    "key": "href",
    "value": "/somewhere"
  }
]

Untuk membuat:

<a{{#attr}} {{ key }}="{{ value }}"{{/attr}}></a>

Hai kawan,

Bagaimana saya bisa mengulangi daftar anonim? Saya mencoba menggunakan {{#.}} dan {{/.}} tetapi tidak berhasil.

Terima kasih

Untuk mengulangi daftar anonim

let facts = doc.data(); res.render('index', {facts});

<ul> {{#each facts}} <li>Key: {{@key}} Value = {{this}}</li> {{/each}} </ul>

Ada sesuatu dalam masalah ini yang resmi?

Bagaimana cara menggunakan daftar objek anonim dengan pasangan nilai kunci?

Tolong tunjukkan contoh nyata menggunakan objek yang disarankan, var values = { 'single': 'Single bed', ...} dan output pertanyaan yang disarankan.

PS: @prashantcs8 contoh Anda nyata? tidak bekerja.

@chlab kita di 2018... Tidak ada opsi di Kumis untuk menggunakan referensi anonim?

@baseten , tentang Anda "Tapi harus" di atas , itulah masalahnya, jelek untuk menegakkan konversi struktur data ...

Ini bukan solusi yang elegan, tetapi saya menggunakan res.render('index', objs2list(obj)) mana mungkin ada metode pembantu Kumis untuk melakukan konversi,

function objs2list(p) {
  r = [];
  for (var key in p) if (p.hasOwnProperty(key)) {
    r.push({"@key":key,"@val":p[key]});
  }
  return r;
}

ada?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

mbrodala picture mbrodala  ·  16Komentar

amper5and picture amper5and  ·  5Komentar

rlightner picture rlightner  ·  7Komentar

SmasherHell picture SmasherHell  ·  18Komentar

barbalex picture barbalex  ·  5Komentar