在别处显示剔除视图模型子元素答案

【问题标题】：display knockout viewmodel child elements elsewhere在别处显示剔除视图模型子元素
【发布时间】：2013-06-05 06:21:22
【问题描述】：

我定义了以下视图模型：

function BookCartViewModel() {
this.Books = ko.observableArray([]);
this.Categories = ko.observableArray([]);
}

var Book = function (data) {
   this.ISBN = ko.observable(data.ISBN);
   this.BookID = ko.observable(data.BookID);
   this.BookName = ko.observable(data.Name);
   this.Price = ko.observable(data.Price);
   this.Publisher = ko.observable(data.Publisher);
   this.PublishedDate = ko.observable(data.PublishedDate);
   this.Authors = ko.observableArray(data.Authors);
   this.Category = ko.observable(data.Category);
   this.Reviews = ko.observableArray([]);
   var items = $.map(data.BookReviews, function (d) { return new Review(d) });

   this.ShowReviews = function () {
   }
 }

var Review = function (data) {
   this.ReviewID = ko.observable(data.ReviewID);
   this.Reviewer = ko.observable(data.ReviewerName);
   this.Email = ko.observable(data.Email);
   this.BookID = ko.observable(data.FkBookID);
   this.ReviewDate = ko.observable(data.ReviewDate);
   this.Comments = ko.observable(data.Comments);
   this.Rating = ko.observable(data.Rating);
}

我的视图如下，它以表格结构显示书籍：

 <tbody data-bind="foreach:Books">
    <tr>
        <td style="width:20%; text-align:left;" data-bind="text:ISBN"></td>
        <td style="width:20%; text-align:left;" data-bind="text:BookName"></td>
        <td style="width:30%; text-align:left;" data-bind="text:Authors"></td>
        <td style="width:10%; text-align:left;" data-bind="text:Price"></td>
        <td style="width:10%; text-align:left;" data-bind="text:PublishedDate"></td>
        <td style="width:10%; text-align:left;">
            <input id="btnShowReviews" type="button" value="Reviews"  data-      bind="click:ShowReviews" />
        </td>
    </tr>       
   </tbody>

现在我想做的是在单独的表格中显示一本书的评论，当您点击评论按钮时。我怎样才能用我定义我的视图模型的方式来完成这个？还是需要改？

请帮忙

【问题讨论】：

标签： knockout.js viewmodel

【解决方案1】：

function BookCartViewModel() {
    this.Books = ko.observableArray([]);
    this.Categories = ko.observableArray([]);
    this.SelectedBook = ko.observable();

    this.selectBook = function(book, event) {
        this.SelectedBook(book);
    }
}

和

<div id="bookReview" data-bind="if: SelectedBook">
  <table data-bind="foreach: SelectedBook.Reviews">
    <!-- ... -->
  </table>
</div>

现在您只需要一个通过data-bind="click: $root.selectBook" 写入SelectedBook 的按钮。

【讨论】：

我还有一个问题，如果我想在上表之外添加一本书怎么办？我知道如何在表的 foreach 绑定中执行此操作，但我在其外部的单独 div 中执行此操作，我该如何进行数据绑定？模型应该如何改变？
您可以使用ko.utils.arrayFirst()通过它的ID或ISBN或Books数组中的任何其他属性来查找一本书，并使用返回的书调用this.selectBook(book)。请参阅knockmeout.net/2011/04/utility-functions-in-knockoutjs.html 了解有用的实用功能的说明。当然，您可以使用普通的 for 循环或 jQuery 的 $.each() 来做同样的事情。您存储在SelectedBook 中的任何Book 实例都可以使用，如何获取它取决于您。

【解决方案2】：

创建一个 Book 类型的变量，用于存储所选书籍或书籍以供审阅
制作一个 div，如果 book for review 不为空，则该 div 可见，然后映射所需的属性
如果没有可供审查的图书选择，则隐藏该 div

【讨论】：