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

observable های محاسباتی که مقدارشان قابل ویرایش است

دوره های پیشنهادی

آموزش Knockoutjs –writable computed observable (observable های محاسباتی که مقدارشان قابل ویرایش است)

این مبحث متناسب با نیاز کاربران خبره ی کتابخانه ی KO نوشته شده است و موارد کاربرد آن محدود به شرایط خاص و سناریوهای پیچیده می باشد –بنابراین کاربران تازه وارد می توانند نخوانده از آن رد شوند.

Computed observable ها معمولا دارای مقدارهایی هستند که از محاسبه ی observable های دیگر بدست می آید و از اینرو فقط قابل خواندن (read-only) هستند. جالب اینجا است که می توان مقدار آن ها را قابل ویرایش یا به اصطلاح writable کرد. برای این منظور کافی است تابع callback خود را صدا بزنید که عملیات خاصی را بر روی مقادیر داخل computed observable ها انجام می دهد.

برای نوشتن observable های محاسباتی قابل ویرایش خود، کافی است آن را مانند یک observable عادی نوشته و سپس منطق اختصاصی خود را به آن اضافه نمایید که تمامی عملیات read و write را intercept می کند. درست مانند observable های عادی، می توانید با بهره گیری از سینتکس زنجیره ای (متصل کردن observable ها یا property ها به صورت دنباله ای) مقادیر لازم را یکجا داخل چندین observable یا property های computed observable یک model object قرار دهید. به عنوان مثال می توان به نمونه ی myViewModel.fullName('Joe Smith').age(50) اشاره کرد که در آن مقدار دو property همزمان تغییر داده می شوند.

Observable های محاسباتی قابل ویرایش (computed writable) یکی از امکانات سودمند کتابخانه ی KO هستند که موارد استفاده ی زیادی به خصوص در سناریوهای پیچیده دارند.

نمونه ی 1: تجزیه ی ورودی کاربر

به مثال درس قبلی، “first name + last name = full name”، باز می گردیم. می توانید مثال را برعکس کنید، بدین معنی که full name را یک observable محاسباتی قابل ویرایش کنید تا کاربر بتواند نام کامل شخص را مسقیما ویرایش کند. به دنبال این اتفاق مقدار ارائه شده parse (ترجمه) شده و بلافاصله به observable های firstName و lastName اصلی (زیرین) نگاشت (map) می شوند. در این مثال، تابع callback ای که write نام دارد، مقادیر ورودی (متن ورودی) را به دو جزء جدای “firstName” و “lastName” تجزیه کرده و سپس مقادیر آن ها را در observable های اصلی قرار می دهد (می نویسد).

First name: Planet Last name: Earth Hello,

کد بخش view:

First name:
Last name:
Hello,

کد بخش view model:

function MyViewModel() {
   this.firstName = ko.observable('Planet');
   this.lastName = ko.observable('Earth');
   this.fullName = ko.pureComputed({
       read: function () {
           return this.firstName() + " " + this.lastName();
       },
       write: function (value) {
           var lastSpacePos = value.lastIndexOf(" ");
           if (lastSpacePos >0) { // Ignore values with no space character
               this.firstName(value.substring(0, lastSpacePos));// Update "firstName"
               this.lastName(value.substring(lastSpacePos + 1));// Update "lastName"
           }
       },
       owner: this
   });
}
ko.applyBindings(new MyViewModel());

نمونه ی فوق، نقطه ی مقابل مثال Hello World است، بدین معنی که در نمونه ی جاری مقدار first name و last name قابل ویرایش نیستند اما full name که ترکیبی از دو property مذکور است، قابل ویرایش می باشد.

کد view model مثال قبلی استفاده از تکنیک ارسال یک پارامتر (single parameter syntax) را برای مقداردهی اولیه ی computed observable ها به نمایش می گذارد.

نمونه ی 2: انتخاب/خارج ساختن از حالت انتخاب تمامی آیتم ها

زمانی که لیستی از آیتم های قابل گزینش را در اختیار کاربر قرار می دهید، بد نیست روشی را بکار ببرید که امکان انتخاب تمامی آیتم ها یا خارج کردن تمامی آن ها از حالت انتخاب را فراهم کند. این کار به راحتی توسط یک مقدار بولی انجام می شود. به طوری که اگر مقدار بولی بر روی true تنظیم باشد، آنگاه تمامی آیتم ها انتخاب شده هستند و هنگامی که بر روی false تنظیم شد، کلیه ی آیتم ها از حالت انتخاب شده خارج می شوند.

Produce Apple Banana Celery Corn Orange Spinach

کد بخش view:

 
Produce

کد بخش view model:

   function MyViewModel() {
   this.produce = [ 'Apple', 'Banana', 'Celery', 'Corn', 'Orange', 'Spinach' ];
   this.selectedProduce = ko.observableArray([ 'Corn', 'Orange' ]);
   this.selectedAllProduce = ko.pureComputed({
   read: function () {
   // Comparing length is quick and is accurate if only items from the
   // main array are added to the selected array.
   return this.selectedProduce().length === this.produce.length;
   },
   write: function (value) {
   this.selectedProduce(value ? this.produce.slice(0) : []);
   },
   owner: this
   });
   }
   ko.applyBindings(new MyViewModel());

نمونه ی 3: تبدیلگر مقدار

ممکن است لازم باشد یک بخش از داده را در صفحه با فرمتی متفاوت از فرمتی که با آن ذخیره شده نمایش دهید. برای مثال، فرض بگیرید می خواهید مقدار قیمت آیتمی را در قالب ممیز شناور خام (raw float) ذخیره کنید، اما همزمان به کاربر اجازه دهید آن را با نماد واحد پولی کشور مشخص و تعداد رقم اعشار ثابت ویرایش کند. در این سناریو می توانید از یک observable محاسباتی قابل ویرایش برای نمایاندن و ارائه ی مقدار قیمت فرمت دهی شده (formatted price) استفاده کنید و سپس مقادیر ورودی را به نوع float نگاشت نمایید:

Enter bid price:

(Raw value: 25.99)

کد بخش view:

   
Enter bid price:
(Raw value: )

کد بخش view model:

       function MyViewModel() {
           this.price = ko.observable(25.99);
           this.formattedPrice = ko.pureComputed({
               read: function () {
                   return '$' + this.price().toFixed(2);
               },
               write: function (value) {
                  // Strip out unwanted characters, parse as float, then write the 
                   // raw data back to the underlying "price" observable
                   value = parseFloat(value.replace(/[^\.\d]/g, ""));
                   this.price(isNaN(value) ? 0 : value);// Write to underlying storage
               },
               owner: this
           });
       }
       ko.applyBindings(new MyViewModel());

حال هر زمان که کاربر قیمت جدیدی را وارد می کند، کادر متن بلافاصله (بروز رسانی شده و) آن را ، صرف نظر از فرمت مقدار ورودی، با نماد واحد پولی دلار و دو رقم اعشار نمایش می دهد. این قابلیت سبب ارتقا تجربه ی کاربری از اپلیکیشن می شود، زیرا شخص به واقع مشاهده می کند که برنامه مقدار ورودی مورد نظر را به عنوان قیمت می شناسد. همچنین می دانند که بیش از دو رقم اعشار نمی توانند وارد کنند چرا که ارقام اعشاری که از دقت (اعشاری) دو تخطی کنند، بلافاصله حذف می گردند. مشابه آن امکان درج مقادیر منفی وجود ندارد زیرا تابع بازفراخوان (callback) write علامت منفی را از عدد حذف می کند.

نمونه ی 4: فیلتر و اعتبارسنجی ورودی کاربر

در نمونه ی 1 مشاهده کردید که چگونه یک observable محاسباتی قابل ویرایش می تواند اطلاعات ورودی را فیلتر کند و مقادیر خاصی را در صورتی که شرایط و معیار خاصی را برآورده نمی کنند، در observable های اصلی قرار ندهد. در مثال مذکور، full name هایی که از کاراکتر space در آن ها استفاده نشده بود، کاملا نادیده گرفته شده و به عبارتی فیلتر می شدند.

اکنون می خواهیم این مثال را یک گام به جلو ببریم. در نمونه ی زیر می خواهیم بسته به اینکه ورودی جاری کاربر با معایرهای مورد نظر منطبق هست یا خیر، یک پیغام را در UI به نمایش بگذاریم. برای مثال در زیر از کاربر انتظار وارد کردن عدد را داریم و اگر کاربری هر چیز دیگری به غیر از عدد وارد کند، پیغام That’s not a number! پدیدار می شود.

Enter a numeric value: 
(Accepted value: 123)
Enter a numeric value: 
That's not a number!
(Accepted value: )

کد بخش view:

   
Enter a numeric value:
That's not a number!
(Accepted value: )

کد بخش view model:

       function MyViewModel() {
           this.acceptedNumericValue = ko.observable(123);
           this.lastInputWasValid = ko.observable(true);
           this.attemptedValue = ko.pureComputed({
               read: this.acceptedNumericValue,
               write: function (value) {
                   if (isNaN(value))
                       this.lastInputWasValid(false);
                   else {
                       this.lastInputWasValid(true);
                       this.acceptedNumericValue(value);// Write to underlying storage
                   }
               },
               owner: this
           });
       }
       ko.applyBindings(new MyViewModel());

حال acceptedNumericValue فقط و فقط مقادیر عددی را می پذیرد و هر مقدار دیگری که در آن درج شود، همان طور که در مثال مشاهده می کنید، بجای بروز رسانی acceptedNumericValue، سبب نمایش پیغام خطای اعتبارسنجی می شود.

توجه: برای چنین موارد جزئی (همچون بررسی اینکه آیا ورودی از نوع عدد هست یا خیر) استفاده از این تکنیک بیش از حد پیچده و غیر ضروری است. می توان مکانیزم نام برده را با استفاده از قابلیت jQuery Validation و بکار بردن کلاس number آن در المان ، به راحتی پیاده سازی کرد.

قابلیت اعتبارسنجی (validation) کتابخانه ی jQuery و Knockout در کنار هم به خوبی کار می کنند. اما مثال قبلی مکانیزم کلی تری از اعتبارسنجی و فیلتر کردن برای نمایش user feedback با فرمت خاص که با منطق اختصاصی پیاده سازی شده را نشان می دهد. این مکانیزم بیشتر برای سناریوهای پیچیده مناسب می باشد که قابلیت درون ساخته ی jQuery validation در آن پاسخگو نیست.

  • 631
  •    4
  • تاریخ ارسال :   1395/05/20

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

ارسال

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

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