Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Mengecek Adanya Komentar Balasan pada Komentar Induk

Mengingat kembali tentang bagaimana kita membedakan antara komentar induk dengan komentar balasan pada Blogger dapat kita lakukan dengan cara mengecek adanya properti var.inReplyTo pada item komentar yang dimaksud. Properti ini bertugas untuk menyimpan ID komentar induk:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='data:comment.inReplyTo'>
    <!-- `data:comment` adalah komentar balasan -->
  <b:else/>
    <!-- `data:comment` adalah komentar induk -->
  </b:if>
</b:loop>

Dari sini kita dapat melakukan iterasi ulang di dalam iterasi komentar induk, dan kemudian menyaring anak-anak komentar yang memiliki nilai properti var.inReplyTo (dalam hal ini adalah reply.inReplyTo) yang sama dengan parent.id (dalam hal ini adalah comment.id):

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='!data:comment.inReplyTo'>
    <b:loop values='data:post.comments' var='reply'>
      <b:if cond='data:reply.inReplyTo == data:comment.id'>
        <!-- komentar balasan untuk `data:comment` akan tersedia di sini sebagai `data:reply` -->
      </b:if>
    </b:loop>
  </b:if>
</b:loop>

Ekspresi lambda pada Blogger memungkinkan kita untuk melakukan penyaringan komentar-komentar balasan terhadap ID komentar induk dengan cara yang lebih cepat seperti ini, karena penyaringan data komentar dapat dilakukan sebelum proses iterasi dilakukan:

<b:loop values='data:post.comments' var='comment'>
  <b:if cond='!data:comment.inReplyTo'>
    <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
      <!-- komentar balasan untuk `data:comment` akan tersedia di sini sebagai `data:reply` -->
    </b:loop>
  </b:if>
</b:loop>

Ada satu operator yang menarik dalam ekspresi lambda yaitu operator count. Operator ini memungkinkan kita untuk menghitung jumlah item yang ada setelah proses bersyarat selesai diterapkan pada koleksi data. Sebagai contoh, kode di bawah ini akan menampilkan jumlah total komentar dengan nama penulis Taufik Nurrohman:

Jumlah komentar dari Taufik Nurrohman: <b:eval expr='data:post.comments count (i => i.author == "Taufik Nurrohman")'/>

Dalam bahasa pemrograman, kita dapat melakukan sesuatu seperti ini untuk menghitung jumlah komentar dari Taufik Nurrohman, yang mana ini tidak akan dapat kita lakukan pada Blogger sebelum adanya fitur ekspresi lambda:

var i = 0;
post.comments.forEach(function(comment) {
    if (comment.author == 'Taufik Nurrohman') {
        ++i;
    }
});

console.log('Jumlah komentar dari Taufik Nurrohman: ' + i);

Operator count pada ekspresi lambda akan lebih sesuai jika disamakan dengan metode filter dan properti length pada JavaScript seperti ini:

var i = post.comments.filter(function(i) {
    return i.author == 'Taufik Nurrohman';
}).length;

console.log('Jumlah komentar dari Taufik Nurrohman: ' + i);

Cara Mengecek Apakah Komentar Induk Memiliki Komentar Balasan atau Tidak

Sebuah komentar dari seorang pembaca bernama Satank Mkr pada artikel Membuat Fitur Komentar Berbalas (Threaded Comments) pada Blogger dengan Fungsional yang Asli kurang lebih menanyakan tentang bagaimana caranya menambahkan elemen pembungkus khusus yang akan melingkupi seluruh komentar balasan, sehingga jika terdapat setidaknya satu buah komentar balasan di bawah komentar induk, maka komentar-komentar balasan tersebut akan dibungkus dengan elemen HTML tertentu. Berikut adalah ilustrasi yang beliau maksudkan:

<b:if cond='data:post.numComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
    </b:loop>
  </ul>
</b:if>
<ul class="comments">
  <li class="comment"> … </li>
  <li class="comment"> … </li>
  <li class="comment"> … </li>
</ul>

Melihat pada contoh di atas, akan sangat mudah untuk menambahkan elemen pembungkus <ul class="comments"> karena Blogger memiliki properti numComments pada data:post yang bertugas untuk menyimpan jumlah keseluruhan komentar yang ada. Akan tetapi, kita tidak memiliki properti khusus untuk menghitung jumlah komentar balasan melalui data:comment, sehingga untuk menentukan apakah sebuah komentar induk memiliki komentar balasan atau tidak akan mustahil tanpa adanya properti khusus; katakanlah var.numReplies seperti ini:

<b:if cond='data:post.numComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:if cond='data:comment.numReplies > 0'>
          <ul class='comment-replies'>
            <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
              <li class='reply'> … </li>
            </b:loop>
          </ul>
      </b:if>
    </b:loop>
  </ul>
</b:if>
<ul class="comments">
  <li class="comment"> … </li>
  <li class="comment"> … </li>
  <li class="comment">
    …
    <ul class='comment-replies'>
      <li class='reply'> … </li>
      <li class='reply'> … </li>
    </ul>
  </li>
  <li class="comment"> … </li>
</ul>

Operator count datang menyelamatkan! Karena operator ini mampu menghitung jumlah komentar yang ada setelah proses bersyarat diterapkan pada data komentar, maka kita dapat menghitung jumlah komentar balasan terkait dengan komentar induk dengan cara seperti ini:

<b:with var='numReplies' value='data:post.comments count (i => i.inReplyTo == data:comment.id)'>
  Jumlah komentar balasan: <data:numReplies/>
</b:with>

Untuk menerapkannya sebagai ekspresi kondisional di dalam iterasi komentar, kita bisa menuliskannya seperti ini:

<b:if cond='data:post.numComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:with var='numReplies' value='data:post.comments count (i => i.inReplyTo == data:comment.id)'>
          <b:if cond='data:numReplies > 0'>
            <ul class='comment-replies'>
              <b:loop values='data:post.comments filter (i => i.inReplyTo == data:comment.id)' var='reply'>
                <li class='reply'> … </li>
              </b:loop>
            </ul>
          </b:if>
        </b:with>
      </b:if>
    </b:loop>
  </ul>
</b:if>

Atau seperti ini juga bisa:

<b:if cond='data:post.numComments > 0'>
  <ul class='comments'>
    <b:loop values='data:post.comments' var='comment'>
      <li class='comment'> … </li>
        <b:with var='replies' value='data:post.comments filter (i => i.inReplyTo == data:comment.id)'>
          <b:if cond='data:replies.size > 0'>
            <ul class='comment-replies'>
              <b:loop values='data:replies' var='reply'>
                <li class='reply'> … </li>
              </b:loop>
            </ul>
          </b:if>
        </b:with>
      </b:if>
    </b:loop>
  </ul>
</b:if>

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 0 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Info
  1. http://www.dte.web.id/2013/12/daftar-salinan-berkas-widget-halaman.html
  2. http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html
Tutup
Ke atas!