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 回答