如何使用knockout.js将过滤表与过滤器进行数据绑定？

Question

我是新来的数据绑定knockout.js。我有一个简单的例子，下面使用knockout.js来将数据绑定到一个表，但是当涉及到数据绑定使用过滤器的嵌套表时，我很难在knockout.js中找到它。如果您查看下面的两个示例表，其中一个是使用knockout.js将数据绑定到一个表中的记录，另一个是使用具有的Razor代码的嵌套表，其中子句中的foreach语句用于过滤回复的每条评论。第二个带有Razor代码的是我用来显示和数据绑定评论及其答复的嵌套表格。我试图在knockout.js中应用这个数据绑定。 如何在knockout.js中执行此操作？谢谢...

表1.

<table id="products1" data-bind="visible: Products().length > 0"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Category</th> 
       <th>Price</th> 
       <th>Actions</th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: Products"> 
      <tr> 
       <td data-bind="text: Id"></td> 
       <td data-bind="text: Name"></td> 
       <td data-bind="text: Category"></td> 
       <td data-bind="text: formatCurrency(Price)"></td> 

       <td> 

        <button data-bind="click: $root.edit">Edit</button> 
        <button data-bind="click: $root.delete">Delete</button> 

       </td> 

      </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
       <td></td> 
       <td></td> 
       <td>Total :</td> 
       <td data-bind="text: formatCurrency($root.Total())"></td> 
       <td></td> 
      </tr> 
     </tfoot> 
    </table> 

表2

<table id="mytable"> 

    @foreach (var item in Model.Comments) 
    { 
    <tr > 
     <td class="tdstyle" > 

    <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item.name) </div> 

    <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px; display :block; background-color: #CCCCFF"> @Html.DisplayFor(modelItem => item.comment) </p> 
    <p style="margin-top:2px;margin-bottom:0px;height:3px"> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>                  
    <div id="divReply" class ="divrep" style=" position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px"> 
     <table> 
      @foreach (var item2 in Model.Replies.Where(r => r.idrep == item.Id)) 
      { 
       <tr > 

        <td > 
         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.namerep) </div> 

        <p class="comment more" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px; display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem => item2.reply) </p> 

        </td> 
       </tr> 
      } 
     </table> 

     </td>  
    </tr> 

    } 

</table> 

Answer 1

尝试是这样的&使用computed这将是容易出现这种情况。

查看：

<div class='liveExample' data-bind="foreach:comments"> <b data-bind="text:name"> </b> 
    <br/> 
    <div data-bind="foreach:array"> <span data-bind="text:nameRep"></span> 
<span data-bind="text:reply"></span> 
     <br/> 
    </div> 
    <hr/> 
</div> 

视图模型：

var data = [{ 
    'name': 'charlie', 
    'id': 1 
}, { 
    'name': 'mack', 
    'id': 2 
}, { 
    'name': 'dargen', 
    'id': 3 
}, { 
    'name': 'cool', 
    'id': 4 
}, { 
    'name': 'silver', 
    'id': 5 
}] 


var ViewModel = function() { 
    var self = this; 
    self.innerLoop = ko.observableArray(); 
    self.replies = ko.observableArray([{ 
     'nameRep': 'becok', 
     'rid': 1, 
     'reply': 'hello' 
    }, { 
     'nameRep': 'saluk', 
     'rid': 1, 
     'reply': 'hey bro' 
    }, { 
     'nameRep': 'chin-ui', 
     'rid': 4, 
     'reply': 'wassup' 
    }, { 
     'nameRep': 'mark', 
     'rid': 3, 
     'reply': 'chill out' 
    }, { 
     'nameRep': 'kaj', 
     'rid': 3, 
     'reply': 'ok dear' 
    }, ]); 

    var comment = function (c) { 
     this.id = ko.observable(c.id); 
     this.name = ko.observable(c.name); 
     this.array = ko.computed(function() { 
      var name = this.id(); 
      var arr = []; 
      arr = ko.utils.arrayFilter(self.replies(), function (item) { 
       return item.rid === name; 
      }); 
      return arr; 
     }, this); 
    } 

    self.comments = ko.observableArray(); 
    ko.utils.arrayForEach(data, function (item) { 
     self.comments.push(new comment(item)); 
    }); 
}; 

ko.applyBindings(new ViewModel()); 

检查工作小提琴here