Öğe Ayrıntılarını Görüntüleme
Bu bölümde, her kitabın ayrıntılarını görüntüleme özelliğini ekleyebilirsiniz. app.js görünüm modeline aşağıdaki kodu ekleyin:
self.detail = ko.observable();
self.getBookDetail = function (item) {
ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
self.detail(data);
});
}
Views/Home/Index.cshtml dosyasında, Ayrıntılar bağlantısına bir veri bağlama öğesi ekleyin:
<ul class="list-unstyled" data-bind="foreach: books">
<li>
<strong><span data-bind="text: AuthorName"></span></strong>: <span data-bind="text: Title"></span>
<!-- New code -->
<small><a href="#" data-bind="click: $parent.getBookDetail">Details</a></small>
</li>
</ul>
Bu, bir> öğenin tıklama işleyicisini <görünüm modelinde getBookDetail
işleve bağlar.
Aynı dosyada aşağıdaki işaretlemeyi değiştirin:
<div class="col-md-4">
<!-- TODO: Book details -->
</div>
şununla değiştirin:
<!-- ko if:detail() -->
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Detail</h2>
</div>
<table class="table">
<tr><td>Author</td><td data-bind="text: detail().AuthorName"></td></tr>
<tr><td>Title</td><td data-bind="text: detail().Title"></td></tr>
<tr><td>Year</td><td data-bind="text: detail().Year"></td></tr>
<tr><td>Genre</td><td data-bind="text: detail().Genre"></td></tr>
<tr><td>Price</td><td data-bind="text: detail().Price"></td></tr>
</table>
</div>
</div>
<!-- /ko -->
Bu işaretleme, görünüm modelinde gözlemlenebilir özelliğinin detail
özelliklerine bağlı bir tablo oluşturur.
"<-- ko -->" söz dizimi, DOM öğesinin dışında bir Knockout bağlaması eklemenize olanak tanır. Bu durumda bağlama, if
işaretlemenin bu bölümünün yalnızca null olmayan bir durumda details
görüntülenmesine neden olur.
<!-- ko if:detail() -->
Şimdi uygulamayı çalıştırır ve "Ayrıntı" bağlantılarından birine tıklarsanız, uygulama kitap ayrıntılarını görüntüler.
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin