дисплей Нокаут ViewModel дочерние элементы других

У меня есть следующие ViewModel определены:дисплей Нокаут ViewModel дочерние элементы других

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, внизу, когда вы нажимаете кнопку отзыва. Как я могу выполнить это с тем, как я определил свою модель просмотра? Или это нужно изменить?

Пожалуйста, помогите

источник

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>

Теперь все, что вам нужно, это кнопка, которая пишет SelectedBook через data-bind="click: $root.selectBook".

источник

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() ', чтобы сделать то же самое. Любой экземпляр 'Book', который вы храните в' SelectedBook', будет работать, как вы его получите, зависит от вас. – Tomalak

Сделать одну переменную типа книги, которая будет сохранена выбранная или книга для обзора
сделать один DIV, который будет виден, если книга для обзора не равно нулю, то карта необходимая свойства
Если нет никакого выбора для книги для обзора, то скрыть, что Дива

источник

2013-06-05 06:27:38

дисплей Нокаут ViewModel дочерние элементы других

ответ

Смежные вопросы