顯示淘汰賽視圖模型子元素別處

我有以下視圖模型定義：顯示淘汰賽視圖模型子元素別處

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>

現在我想做的事是當您點擊評論按鈕時，在下面的SEPERATE表中顯示書籍的評論。我如何用我定義了viewmodel的方式來完成這個任務？還是需要更改？

請幫

來源

2013-06-05 devC

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。

來源

2013-06-05 06:33:46 Tomalak

謝謝，這就是我一直在尋找:) – devC

我還有一個問題，但如果我想在上面的表格外添加一本書？我知道如何在表的foreach綁定中做到這一點，但我在它外面的一個單獨的div中執行它，我該怎麼做數據綁定？模型應該如何改變？ – devC

您可以使用'ko.utils.arrayFirst（）'通過它的ID或ISBN或'Books'數組內的任何其他屬性來查找書籍，並使用返回的書籍調用'this.selectBook（book）'。請參閱http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html以獲取有用的實用功能的說明。當然你可以使用普通的'for'循環或者jQuery的'$ .each（）'來做同樣的事情。您在「SelectedBook」中存儲的任何「Book」實例都將起作用，您如何獲得它取決於您。 – Tomalak

制式圖書的一個變量，它會被存儲在選定或書進行審查
讓一個DIV，這將是可見的，如果書進行審查是不爲空，則需要地圖性能
如果沒有選擇對書進行審查，然後隱藏該div

來源

2013-06-05 06:27:38

顯示淘汰賽視圖模型子元素別處

回答

相關問題