0

折りたたみ可能なセット内にリスト ビューが必要で、 knockout.jsを使用してデータをリスト ビューにバインドしたいと考えています。簡単な例で、これに関して誰でも私を助けてください。以下のコードのContent 1、Content 2、Content 3の代わりにデータをバインドしたいと思います。

<div data-role="collapsible-set" data-collapsed="false" data-icon="" data-expanded-icon="carat-u" data-collapsed-icon="carat-d" data-iconpos="right">
                <div data-role="collapsible">
                    <h3>Collapsible 1</h3>
                    <div data-role="listview">
                        <p>Content 1</p>
                    </div>

                </div>
                <div data-role="collapsible">
                    <h3>Collapsible 2</h3>
                    <div data-role="listview">
                        <p>Content 2</p>
                    </div>
                </div>
                <div data-role="collapsible">
                    <h3>Collapsible 3</h3>
                    <div data-role="listview">
                        <p>Content 3</p>
                    </div>
                </div>
            </div>
4

1 に答える 1

1

ノックアウトがバインドする JavaScript 構造に関するいくつかの詳細が提供されていないため、非常に一般的な例を提供する必要があります。

collapsible要素が配列の一部であり、listviewそれぞれに属するコンテンツがプロパティであると仮定します。

Javascript

要素を表すオブジェクト collapsible:

var Section = function(title, content){
  return {
          title: title,
          content: content, 
          listViewData: new List(title)
        }
}

whereListは、配列に「ダミー」データを入力する関数にすぎません。

var List = function(title){
  var temp = [];
  for(var i = 0; i < 3; i++)
  {
    temp.push({text: title + ': ' + i})
  }
  return temp;
}

collapsible呼び出しが の後にあることを確認して、動作をセットアップしますapplyBindings。

 ko.applyBindings(modelInstance)
 $("div[id^='collapsible']").collapsible()

HTML

<div class="ui-body-d tablist-content" data-role="collapsible-set" data-bind='foreach: items'>
 <div data-bind="attr: {'id': 'collapsible-'+ $index}">
    <h3 data-bind='text: title'></h3>

    <p> <span data-bind='text: content'></span>

     <ul data-role="listview" data-bind="foreach: { data: listViewContents, as: 'listItem'}">
       <li><a href="#" data-bind="text: listItem.text"></a></li>
     </ul>

    </p>
</div>
于 2014-02-13T22:49:36.620 に答える