我有一份网站所有者名单.我正在try 构建一个UI,当我点击他们时,它会显示更多关于他们的信息.

       this.toExpand = ko.observableArray(); //initialize an observable array
       this.invertExpand = ko.observable("");


        this.invertExpand = function (index) {
                if (self.invertExpand[index] == false) {
                self.invertExpand[index] = true;
                alert(self.invertExpand[index]); //testing whether the value changed
            }
            else {
                self.invertExpand[index] = false;
                alert(self.invertExpand[index]); //testing whether the value changed
            }
           
        };

以下是HTML代码:

  <div data-bind="foreach: WebsiteOwners">
  <div>
        <button data-bind="click: $root.invertExpand.bind(this,$index())" class="label label-default">>Click to Expand</button>
    </div>
  <div data-bind="visible: $root.toExpand()[$index]">
   
  

  Primary Owner: <span data-bind="text:primaryOwner"></span>
  Website Name : <span data-bind="text:websiteName"></span>
  //...additional information

  </div>
  </div>

推荐答案

你可以将WebsiteOwner个项目中的一个直接存储在observable中.不需要使用索引.

不要忘记,你通过调用一个不带参数的可观察对象(例如self.invertExpand())来读取它,并通过调用一个值(例如self.invertExpand(true))来写入它

我在这个答案中列举了三个例子:

  • 一种只允许使用敲除打开单个细节的方法
  • 一种允许使用敲除功能独立打开和关闭所有细节的功能
  • 一个不使用敲除,而是使用普通HTML的????

1.手风琴

下面是一个支持单个扩展元素的列表示例:

const websiteOwners = [
  { name: "Jane", role: "Admin" },
  { name: "Sarah", role: "Employee" },
  { name: "Hank", role: "Employee" }
];

const selectedOwner = ko.observable(null);

const isSelected = owner => selectedOwner() === owner;
const toggleSelect = owner => {
  selectedOwner(
    isSelected(owner) ? null : owner
  );
}

ko.applyBindings({ websiteOwners, isSelected, toggleSelect });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: websiteOwners, as: 'owner' }">
  <li>
    <span data-bind="text: name"></span>
    <button data-bind="
      click: toggleSelect,
      text: isSelected(owner) ? 'collapse' : 'expand'"></button>
      
    <div data-bind="
      visible: isSelected(owner),
      text: role"></div>
  </li>
</ul>

2.独立

如果希望每个视图都能够独立展开/折叠,我建议将该状态添加到所有者视图模型中:

const websiteOwners = [
  { name: "Jane", role: "Admin" },
  { name: "Sarah", role: "Employee" },
  { name: "Hank", role: "Employee" }
];

const OwnerVM = owner => ({
  ...owner,
  isSelected: ko.observable(null),
  toggleSelect: self => self.isSelected(!self.isSelected())
});
  
ko.applyBindings({ websiteOwners: websiteOwners.map(OwnerVM) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: websiteOwners">
  <li>
    <span data-bind="text: name"></span>
    <button data-bind="
      click: toggleSelect,
      text: isSelected() ? 'collapse' : 'expand'"></button>
      
    <div data-bind="
      visible: isSelected,
      text: role"></div>
  </li>
</ul>

3. Using <details>

这一个利用了<details>元素的力量.它可能更容易访问,也更容易实现!

const websiteOwners = [
  { name: "Jane", role: "Admin" },
  { name: "Sarah", role: "Employee" },
  { name: "Hank", role: "Employee" }
];

ko.applyBindings({ websiteOwners });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: websiteOwners">
  <li>
    <details>
      <summary data-bind="text: name"></summary>
      <div data-bind="text: role"></div>
    </details>
  </li>
</ul>

Javascript相关问答推荐

处理时间和字符串时MySQL表中显示的日期无效

Chart.js 4.4.2,当悬停在一个数据点上时,如何在工具提示中拥有多个数据点/标签?

Ember.js 5.4更新会话存储时如何更新组件变量

在执行异步导入之前判断模块是否已导入()

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

ChartJs未呈现

JavaScript是否有多个`unfined`?

如何在 Select 文本时停止Click事件?

在画布中调整边上反弹框的大小失败

更新Redux存储中的对象数组

如何使用Astro优化大图像?

为什么我不能使用其同级元素调用和更新子元素?

使用可配置项目创建网格

为什么当雪碧的S在另一个函数中时,Phaser不能加载它?

使用Java脚本替换字符串中的小文本格式hashtag

如何创建一个for循环,用于计算仪器刻度长度并将其放入一个HTML表中?

如何调用多个$HTTP.POST请求?

不能用于addEventListener中的变量

如何将类列表切换应用到具有相同类的多个按钮?

使用new关键字或createElement()创建的自定义元素没有is:属性,为什么?