knockout.js 可观察数组表上方的静态行

Posted 2023-03-06

【中文标题】knockout.js 可观察数组表上方的静态行

【英文标题】：Static row above knockout.js observable array table

【发布时间】：2014-02-21 17:52:03

【问题描述】：

我有一个 html 表格，行来自一个可观察的数组....

 <tbody data-bind="foreach: TableArray">
     <tr>
         <td data-bind:"text: Item1"></td>

等等……

我怎样才能跳过第一行...所以我可以在表格顶部添加一个静态行（不是标题）。

<tbody data-bind="foreach: TableArray">
     <tr> 
        <td> Static Row </td>
     </tr>
     <tr>
         <td data-bind:"text: Item1"></td>

【参考方案1】：

解决此问题的一种方法是使用 Knockout 的无容器绑定语法。 请参阅 Knockout 的 foreach 绑定文档中的注 4。http://knockoutjs.com/documentation/foreach-binding.html

---

Javascript

var YourVM = function () 
    this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]);
;

ko.applyBindings(new YourVM());

---

HTML

     <table>
       <thead>
         <tr>
           <th>Your Column</th>
         </tr>
       </thead>
       <tbody>
         <tr class="row-static">
           <td>Static Row</td>
         </tr>    <!-- ko foreach: allItems -->
         <tr>
           <td data-bind="text: $data"></td>
         </tr>    <!-- /ko -->     
       </tbody>
    </table>

---

JS Bin 上的实例http://jsbin.com/AzEwEce/1/edit

【讨论】：

@JamesMcConnell - 在这方面绝对同意你对 Angular 的看法。 github.com/angular/angular.js/issues/1891

【参考方案2】：

您可以使用if binding 仅在“第一次”传递时输出额外的一行。

Example:

<table data-bind ="foreach: rows">

  <tr data-bind="if: $index() == 0" >
    <td><span data-bind="text: $index"></span></td>
  </tr>
  <tr>
    <td><span data-bind="text: text"></span></td>
  </tr>
</table>

【参考方案3】：

秘密在于无容器的 foreach 标记。检查以下链接的“注4”：

http://knockoutjs.com/documentation/foreach-binding.html

这是一个显示基本示例的小提琴。

http://jsfiddle.net/internetH3ro/M9f4D/7/

基本视图模型：

function ViewModel() 
    var self = this;
    self.items = [
        firstName: 'James',
        lastName: 'McConnell'
    ,
        firstName: 'Scott',
        lastName: 'Hanselman'
    ,
        firstName: 'Bill',
        lastName: 'Gates'
    ];

HTML 标记：

<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <!-- ko foreach: items -->
    <tr>
        <td><span data-bind="text: $data.firstName"></span></td>
        <td><span data-bind="text: $data.lastName"></span></td>
    </tr>
    <!-- /ko -->
</table>

因此，您只需将要重复的内容包装在注释中，Knockout 就会为您集合中的每个元素重复该内容。非常漂亮，我希望 Angular 有这样的东西。

【讨论】：

同意 Angular；也许 AngularJS 没有无容器绑定语法，但它确实提供了一种简洁的语法，它提供了与 Knockout 的无容器 foreach 相同的功能。 ***.com/a/21446102/538962

这是正确的答案 - 遗憾的是“user314...”无法为您提供答案。

嗯，不用太担心。我来这里寻求帮助，并尽我所能回馈，这就是我真正关心的一切。 :) 感谢您的认可，非常感谢！

完美！！！救了我！将data-bind="foreach: items" 添加到<tbody>s 会添加一个新的<tbody>...但是（！！！！！！）将其添加到<tr>s 不会创建新的<tr>s。

非常感谢您分享这个。这对我帮助很大！