Question

我想在可折叠集中包含列表视图，我想使用 knockout.js 。请用一个简单的例子来帮助我。我想绑定数据来代替以下代码的内容1 ，内容2 和内容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>

Answer 1

没有提供关于敲除绑定的javascript结构的一些细节，因此我将不得不提供非常通用的example。

假设collapsible元素是数组的一部分，属于每个元素的listview内容属性：

的Javascript

表示collapsible元素的对象：

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

其中List只是用“虚拟”数据填充数组的函数。

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>

数据绑定列表 - 使用可折叠集内的Knockout查看

1 个答案:

的Javascript

HTML