Apakah ada cara di setang JS untuk memasukkan operator logis ke dalam operator kondisional setang standar? Sesuatu seperti ini:
{{#if section1 || section2}}
.. content
{{/if}}
Saya tahu saya bisa menulis pembantu saya sendiri, tetapi pertama-tama saya ingin memastikan saya tidak menciptakan kembali roda.
javascript
handlebars.js
Mike Robinson
sumber
sumber
registerBoundHelper
tidak dapat menangani sintaks Handlebars. Solusinya adalah membuat tampilan khusus: stackoverflow.com/questions/18005111/…Mengambil solusi satu langkah lebih jauh. Ini menambahkan operator perbandingan.
Gunakan dalam template seperti ini:
Versi Script kopi
sumber
'||'
dan'&&'
. Saya menambahkan kasus-kasus ini dan sangat berguna.v1 = Ember.Handlebars.get(this, v1, options)
v2 = Ember.Handlebars.get(this, v2, options)
Setang mendukung operasi bersarang. Ini memberikan banyak fleksibilitas (dan kode pembersih) jika kita menulis logika kita sedikit berbeda.
Faktanya, kita dapat menambahkan semua jenis logika:
Cukup daftarkan pembantu ini:
sumber
options
eksekusi lebih baik menggunakanif
metode dan lebih mudah untuk diuji. Terima kasih!and
danor
pembantu hanya bekerja dengan 2 parameter, yang bukan yang Anda inginkan. Saya berhasil mengolahand
danor
membantu untuk mendukung lebih dari dua parameter. Gunakan ini satu-liner untukand
:return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
dan menggunakan ini satu-liner untukor
:return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
.mengambil yang satu ini takik, bagi Anda yang hidup di tepi.
inti : https://gist.github.com/akhoury/9118682 Demo : Cuplikan kode di bawah ini
Setang Helper:
{{#xif EXPRESSION}} {{else}} {{/xif}}
pembantu untuk mengeksekusi pernyataan IF dengan ekspresi apa pun
encodeURIComponent(property)
template( {name: 'Sam', age: '20' } )
, pemberitahuanage
adalahstring
, hanya agar saya dapat melakukan demoparseInt()
nanti di posting iniPemakaian:
Keluaran
JavaScript: (tergantung pada helper-terus membaca)
Setang Helper:
{{x EXPRESSION}}
Seorang penolong untuk mengeksekusi ekspresi javascript
parseInt(property)
template( {name: 'Sam', age: '20' } )
,age
adalahstring
untuk tujuan demo, bisa apa saja ..Pemakaian:
Keluaran:
JavaScript:
Ini terlihat agak besar karena saya memperluas sintaksis dan mengomentari hampir setiap baris untuk tujuan kejelasan
Moar
jika Anda ingin mengakses ruang lingkup tingkat atas, yang ini sedikit berbeda, ekspresi adalah GABUNG dari semua argumen, penggunaan: katakanlah data konteks terlihat seperti ini:
Javascript:
sumber
{{#each}} ... {{xif ' ../name === this.name' }} {{/each}}
... tapi saya masih menyelidiki ..{{z ...}}
penolongeval(expression);
dengan Anda :eval('(function(){try{return ' + expression + ';}catch(e){}})();');
- saya tahu ini semakin jelek, tetapi tidak bisa memikirkan cara yang aman untuk melakukan ini - harap perhatikan bahwa ini tidak terlalu "cepat" untuk dieksekusi, saya tidak akan melakukan ini dalam iterasi besar.Ada cara sederhana untuk melakukan ini tanpa menulis fungsi pembantu ... Itu bisa dilakukan dalam template sepenuhnya.
Sunting: Sebaliknya Anda dapat melakukan atau dengan melakukan ini:
Edit / Catatan: Dari situs web stang: handlebarsjs.com berikut adalah nilai-nilai palsu:
sumber
Satu masalah dengan semua jawaban yang diposting di sini adalah bahwa mereka tidak bekerja dengan properti terikat, yaitu kondisi if tidak dievaluasi kembali ketika properti yang terlibat berubah. Berikut ini versi yang lebih maju dari binding binding pembantu. Ia menggunakan fungsi bind dari sumber Ember, yang juga digunakan untuk mengimplementasikan
#if
pembantu Ember normal .Yang ini terbatas pada properti terikat tunggal di sisi kiri, dibandingkan dengan konstan di sisi kanan, yang saya pikir cukup baik untuk tujuan praktis. Jika Anda membutuhkan sesuatu yang lebih maju daripada perbandingan sederhana, maka mungkin akan lebih baik untuk mulai mendeklarasikan beberapa properti yang dihitung dan menggunakan
#if
pembantu normal sebagai gantinya.Anda bisa menggunakannya seperti ini:
sumber
Solusi yang ditingkatkan yang pada dasarnya bekerja dengan operator biner mana pun (setidaknya angka, string tidak bekerja dengan baik dengan eval, MENGAMBIL INJEKSI SCRIPT MUNGKIN JIKA MENGGUNAKAN OPERATOR NON DEFINISI DENGAN INPUT PENGGUNA):
sumber
Ini solusinya jika Anda ingin memeriksa beberapa kondisi:
Pemakaian:
sumber
Berikut tautan ke helper blok yang saya gunakan: pembanding blok helper . Ini mendukung semua operator standar dan memungkinkan Anda menulis kode seperti yang ditunjukkan di bawah ini. Ini sangat berguna.
sumber
Mirip dengan jawaban Jim tetapi menggunakan sedikit kreativitas kita juga bisa melakukan sesuatu seperti ini:
Kemudian untuk menggunakannya kita mendapatkan sesuatu seperti:
Saya akan menyarankan memindahkan objek keluar dari fungsi untuk kinerja yang lebih baik tetapi jika tidak Anda dapat menambahkan fungsi perbandingan yang Anda inginkan, termasuk "dan" dan "atau".
sumber
Satu alternatif lain adalah dengan menggunakan nama fungsi di
#if
. The#if
akan mendeteksi jika parameter adalah fungsi dan jika sudah maka akan menyebutnya dan menggunakan return untuk check truthyness. Di bawah ini fungsi saya mendapat konteks saat ini sebagaithis
.sumber
Sayangnya tidak ada solusi yang memecahkan masalah "ATAU" operator "cond1 || cond2".
Gunakan "^" (atau) dan periksa apakah kond2 benar
{{#if cond1}} MELAKUKAN TINDAKAN {{^}} {{#if cond2}} MELAKUKAN TINDAKAN {{/ if}} {{/ if}}
Itu melanggar aturan KERING. Jadi mengapa tidak menggunakan parsial untuk membuatnya tidak berantakan
sumber
Saya dapat memahami mengapa Anda ingin membuat penolong untuk situasi di mana Anda memiliki sejumlah besar perbandingan yang bervariasi untuk dilakukan dalam template Anda, tetapi untuk sejumlah kecil perbandingan (atau bahkan satu, yang merupakan apa yang membawa saya ke halaman ini di tempat pertama), mungkin akan lebih mudah untuk mendefinisikan variabel setang baru dalam panggilan fungsi rendering tampilan Anda, seperti:
Lulus ke setang saat render:
dan kemudian di dalam template setang Anda:
Saya menyebutkan ini demi kesederhanaan, dan juga karena ini merupakan jawaban yang mungkin cepat dan bermanfaat sambil tetap mematuhi sifat Setang yang tanpa logika.
sumber
Instal addon Pembantu Ember Truth dengan menjalankan perintah di bawah ini
Anda dapat mulai menggunakan sebagian besar operator logis (eq, bukan-eq, tidak, dan, atau, gt, gte, lt, lte, xor).
Anda bahkan dapat memasukkan subekspresi untuk melangkah lebih jauh,
sumber
Namun solusi bengkok lainnya untuk pembantu ternary:
Atau pembantu bersatu yang sederhana:
Karena karakter ini tidak memiliki arti khusus dalam markup setang, Anda bebas menggunakannya untuk nama pembantu.
sumber
Saya telah menemukan paket npm yang dibuat dengan CoffeeScript yang memiliki banyak pembantu yang luar biasa berguna untuk Setang. Lihatlah dokumentasi di URL berikut:
https://npmjs.org/package/handlebars-helpers
Anda dapat melakukannya
wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz
untuk mengunduhnya dan melihat isi paket.Anda akan dapat melakukan hal-hal seperti
{{#is number 5}}
atau{{formatDate date "%m/%d/%Y"}}
sumber
jika Anda hanya ingin memeriksa apakah ada satu atau elemen lain yang ada, Anda dapat menggunakan bantuan ini
seperti ini
jika Anda juga harus dapat memiliki "atau" untuk membandingkan nilai-nilai pengembalian fungsi, saya lebih suka menambahkan properti lain yang mengembalikan hasil yang diinginkan.
Lagipula templatnya harus tanpa logika!
sumber
Bagi yang mengalami masalah membandingkan properti objek, di dalam helper tambahkan solusi ini
Pembantu Ember.js tidak mengenali parameter dengan benar
sumber
Baru saja datang ke pos ini dari pencarian google tentang cara memeriksa apakah string sama dengan string lain.
Saya menggunakan HandlebarsJS di sisi server NodeJS, tetapi saya juga menggunakan file template yang sama di front-end menggunakan versi browser HandlebarsJS untuk menguraikannya. Ini berarti bahwa jika saya menginginkan pembantu kustom, saya harus mendefinisikannya di 2 tempat terpisah, atau menetapkan fungsi ke objek yang dimaksud - terlalu banyak usaha !!
Apa yang dilupakan orang adalah bahwa objek tertentu memiliki fungsi bawaan yang dapat digunakan dalam templat kumis. Dalam hal string:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.
Kami dapat menggunakan metode ini untuk mengembalikan susunan kecocokan, atau
null
jika tidak ada kecocokan yang ditemukan. Ini sempurna, karena melihat dokumentasi HandlebarsJS http://handlebarsjs.com/builtin_helpers.htmlYou can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.
Begitu...
MEMPERBARUI:
Setelah menguji pada semua browser, ini tidak berfungsi pada Firefox . HandlebarsJS meneruskan argumen lain ke pemanggilan fungsi, yang berarti bahwa ketika String.prototype.match dipanggil, argumen kedua (yaitu flag Regexp untuk pemanggilan fungsi pencocokan sesuai dokumentasi di atas) tampaknya diteruskan. Firefox melihat ini sebagai penggunaan String.prototype.match, dan jadi rusak.
Solusinya adalah mendeklarasikan prototipe fungsional baru untuk objek String JS , dan gunakan itu sebagai gantinya:
Pastikan kode JS ini disertakan sebelum Anda menjalankan fungsi Handlebars.compile (), lalu di templat Anda ...
sumber
Di sini kita memiliki setang vanila untuk beberapa logika && dan || (dan atau):
Tidak yakin apakah "aman" untuk digunakan "dan" dan "atau" ... mungkin berubah menjadi sesuatu seperti "op_and" dan "op_or"?
sumber
Solusi yang Benar untuk DAN / ATAU
Kemudian panggil sebagai berikut
BTW: Perhatikan bahwa solusi yang diberikan di sini tidak benar, dia tidak mengurangi argumen terakhir yang merupakan nama fungsi. https://stackoverflow.com/a/31632215/1005607
AND / OR aslinya didasarkan pada daftar lengkap argumen
Bisakah seseorang mengubah jawaban itu? Saya hanya membuang waktu satu jam untuk mencoba memperbaiki sesuatu dalam jawaban yang direkomendasikan oleh 86 orang. Cara mengatasinya adalah memfilter argumen terakhir yang merupakan nama fungsi.
Array.prototype.slice.call(arguments, 0, arguments.length - 1)
sumber
Mengikuti 2 panduan ini cara-untuk-membiarkan-pengguna-menentukan-membuat-terikat-jika-pernyataan dan pembantu terikat khusus saya bisa menyesuaikan pandangan bersama saya di posting ini pada stackoverflow untuk menggunakan ini alih-alih standar # jika pernyataan. Ini harus lebih aman daripada hanya melemparkan # jika ada di sana.
Pembantu terikat khusus dalam inti itu luar biasa.
Saya menggunakan bara cli untuk membangun aplikasi bara saya.
Pengaturan saat ini pada saat posting ini:
sumber
Di Ember.js Anda bisa menggunakan inline if helper in if block helper. Itu dapat menggantikan
||
operator logis, misalnya:sumber
Anda dapat melakukannya hanya dengan menggunakan operator logis seperti ini di bawah ini:
Sebelum menutup jika Anda dapat menulis logika bisnis Anda
sumber
Anda dapat menggunakan kode berikut:
sumber
Inilah pendekatan yang saya gunakan untuk bara 1.10 dan bara-cli 2.0.
Kemudian Anda dapat menggunakannya di template Anda seperti ini:
Di mana argumen untuk ekspresi yang berlalu dalam sebagai
p0
,p1
,p2
dll danp0
juga dapat dirujuk sebagaithis
.sumber