0

我定义了以下视图模型：

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>

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

请帮忙

4

2 回答 2

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>

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

于 2013-06-05T06:33:46.333 回答
1
  1. 制作一个 Book 类型的变量，该变量将存储所选或书籍以供审阅
  2. 如果 book for review 不为空，则创建一个可见的 div，然后映射所需的属性
  3. 如果没有选择要审查的书，则隐藏该 div
于 2013-06-05T06:27:38.680 回答