0

jquerymobile とノックアウトを使用して、次のようなカスタム バインディングを作成しようとしています。

<ul data-bind="listview: observablearray">
    <li data-bind="text: text"></li>
</ul>

リストビュー バインディングは最初に foreach バインディングのように動作し、次に $(element).listview() を適用します (または、更新時に $(element).listview('refresh') を適用します)。

foreachバインディングを単純に模倣するために、次のことを試みました。

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 = $('<li></li>').css({
          height: '44px'
        })
        var a;
        if (link) {
          a = $('<a href="#"></a>').click(function () {
            link(item)
          });
          li.append(a);
        }
        if (icon) {
          (a || li).append($('<img />').attr('src', icon(item)).addClass('ui-li-icon'));
        }
        if (text) {
          (a || li).append($('<span></span>').text(item[text]));
        }
        listview.append(li);
      });
      listview.listview('refresh')
    }, 0);
  }
};

残念ながら、これはテンプレートを使用しない貧弱な実装であっただけでなく、init のエラーによっても発生しました。

キャッチされていない TypeError: 未定義のプロパティ 'jQuery19101983379740267992' を読み取れません

前もって感謝します！

4

2 に答える 2