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

ساختن جاوا اسکریپت سمت کاربر

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

ساختن جاوا اسکریپت سمت کاربر

  • نمایش لیست کتاب ها
  • نمایش جزئیات یک کتاب
  • اضافه کردن یک کتاب جدید

کتابخانه Knockout از الگوی MVVM استفاده می کند:

  • Model نماینده ی اطلاعات سمت سرور در Business Domain می باشد(در اینجا همان کتاب ها و نویسنده ها می باشد)
  • View نماینده لایه (HTML) می باشد.
  • View model یک object جاوا اسکریپتی است که model ها را نگه می دارد. View model یک مفهوم از UI می باشد که هیچ اطلاعاتی از نمایش HTML ندارد. در عوض، چکیده ای از ویژگی های view مثل لیستی از کتاب ها را نشان می دهد.

View به view model داده محدود(data-bound) می باشد. به روز رسانی های view model به صورت خودکار در view منعکس می شود. همچنین view model از view ، رخدادهایی مثل کلیک دکمه ها را دریافت می کند.

آموزش Web Api

این رویکرد، تغییر دادن پوسته و UI برنامه نویسی شما را آسان تر می کند زیرا شما می توانید اتصالات را بدون دوباره نویسی کد ها تغییر دهید. برای مثال، شاید شما بخواهید لیستی از آیتم ها را در

    نمایش و بعد آنها را در قالب جدول تغییر دهید.

    اضافه کردن کتابخانه Knockout

    در visual studio، از منو tools، Library package manager را انتخاب کنید و سپس Package manager console را بزنید. در پنجره package manager console کد زیر را بنویسید:

    Install-Package knockoutjs

    کد بالا فایل های Knockout را به پوشه Scripts اضافه می کند.

    ساختن View Model

    فایل جاوا اسکریپتی به نام app.js را به پوشه Scripts اضافه کنید.(در solution explorer روی فولدر Scriptsکلیک راست کنید و Add بزنید و JavaScipt File را انتخاب کنید)کد های زیر را به آن اضافه کنید.

    var ViewModel = function () {
       var self = this;
       self.books = ko.observableArray();
       self.error = ko.observable();
       var booksUri = '/api/books/';
       function ajaxHelper(uri, method, data) {
           self.error('');// Clear error message
           return $.ajax({
               type: method,
               url: uri,
               dataType: 'json',
               contentType: 'application/json',
               data: data ? JSON.stringify(data) : null
           }).fail(function (jqXHR, textStatus, errorThrown) {
               self.error(errorThrown);
           });
       }
       function getAllBooks() {
           ajaxHelper(booksUri, 'GET').done(function (data) {
               self.books(data);
           });
       }
       // Fetch the initial data.
       getAllBooks();
    };
     ko.applyBindings(new ViewModel());
    

    در Knockout کلاس observable اتصال به پایگاه داده را فعال می کند. وقتی محتوای یک observable تغییر می کند، observable به تمام کنترول های متصل، اطلاع می دهد و با این عمل، آنها خود را به روز رسانی می کنند.(کلاس observableArray یک آرایه از observable ها می باشد.)view model ما دو observable دارد:

    • Books که لیستی از کتاب ها را نگه داری می کند.
    • اگر فراخوانی AJAX به خطا بخورد، error که شامل یک پیام خطاست ایجاد می شود.

    متد getAllBooks برای دریافت لیست کتاب ها، AJAX را فراخوانی می کند.

    متد ko.applyBindings بخشی از کتابخانه Knockuout می باشد. این متد view model را به عنوان پارامتر دریافت می کند و اتصالات داده را نصب می کند.

    اضافه کردن یک Script Bundle

    Bundling یک ویژگی در ASP.NET 4.5 می باشد که به شما این امکان را می دهد تا چند فایل را در یک فایل ادغام یا بسته بندی کنید. Bundling تعداد درخواست های ارسالی به سرور را کم می کند و باعث بارگذاری سریعتر صفحات می شود.

    فایل App_Start/BundleConfig.cs را باز کنید و کدهای زیر را به متد اضافه کنید.

    public static void RegisterBundles(BundleCollection bundles)
    {
       // ...
       // New code:
       bundles.Add(new ScriptBundle("~/bundles/app").Include(
                 "~/Scripts/knockout-{version}.js",
                 "~/Scripts/app.js"));
    }
    
  • 1176
  •    1212
  • تاریخ ارسال :   1395/03/07

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

ارسال

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

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