Note that there are some explanatory texts on larger screens.

plurals
  1. POCreate custom knockout binding with foreach rendering (for jquery mobile listview)
    primarykey
    data
    text
    <p>Using jquerymobile and knockout, I am trying to create a custom binding that looks as follows</p> <pre><code>&lt;ul data-bind="listview: observablearray"&gt; &lt;li data-bind="text: text"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>where the listview binding would first act like a foreach binding and then apply $(element).listview() to it (or $(element).listview('refresh') on an update).</p> <p>I tried doing the following to naively imitate the foreach binding:</p> <pre><code>ko.bindingHandlers.listview = { init: function (element, valueAccessor) { var listview = $(element); listview.listview(); }, update: function (element, valueAccessor) { var listview = $(element); setTimeout(function () { listview.html(''); var items = valueAccessor().list; var link = valueAccessor().link; var text = valueAccessor().text; var icon = valueAccessor().icon; $.each(ko.utils.unwrapObservable(items) || [], function (i, item) { var li = $('&lt;li&gt;&lt;/li&gt;').css({ height: '44px' }) var a; if (link) { a = $('&lt;a href="#"&gt;&lt;/a&gt;').click(function () { link(item) }); li.append(a); } if (icon) { (a || li).append($('&lt;img /&gt;').attr('src', icon(item)).addClass('ui-li-icon')); } if (text) { (a || li).append($('&lt;span&gt;&lt;/span&gt;').text(item[text])); } listview.append(li); }); listview.listview('refresh') }, 0); } }; </code></pre> <p>Unfortunately, not only was this a poor implementation that didn't use templating, it also through an error on init:</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'jQuery19101983379740267992' of undefined</p> </blockquote> <p>Thanks in advance!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload