آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

نمایش جزئیات آیتم

دوره های مرتبط با این مقاله

نمایش جزئیات آیتم

در این قسمت شما باید قابلیت نمایش جزئیات را به هر book اضافه کنید. در app.js کد های زیر را به view model اضافه کنید:

self.detail = ko.observable();
self.getBookDetail = function (item) {
   ajaxHelper(booksUri + item.Id, 'GET').done(function (data) {
       self.detail(data);
   });
}

در Views/Home/Index.cshtml عنصر data-bind را به لینک جزئیات اضافه کنید:

< 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 >

در کد بالا عنصر < a > به تابع getBookDetail در view model بسط داده می شود.

در فایل مشابه که در زیر می بینید:

< div class="col-md-4" >
   < !-- TODO: Book details -- >
< /div >

کد های زیر را در آن قرار دهید:

< !-- ko if:detail() -- >
< div class="col-md-4" >
  < div class="panel panel-default" >
    < div class="panel-heading" >
    < h2 class="panel-title" >Detailh2 >
    < /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 -- >

ترکیب به شما اجازه می دهد تا خارج از عنصر DOM عملیات bind کردن knockout را انجام دهید.

در غیر این صورت، if binding باعث نمایش Details در صورت خالی نبودن می شود.

< !-- ko if:detail() -- >

حالا برنامه را اجرا کنید و روی لینک Detail کلیک کنید و برنامه باید به شما جزئیات book مانند تصویر زیر را نمایش دهد.

آموزش Web Api
  • 897
  •    1026
  • تاریخ ارسال :   1395/03/07

دانلود PDF دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
نمایش جزئیات آیتم
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .