آموزش Knockout.Js #4
Click Binding روشی است برای اضافه کردن یک گرداننده رویداد در زمانی که قصد داریم یک تابع جاوااسکریپتی را در هنگام کلیک بر روی المان مورد نظر فراخوانی کنیم. از این مقید سازی عموما در عناصر button و input و تگ a استفاده میشود. اما در حقیقت در تمام عناصر غیر پنهان صفحه مورد استفاده قرار میگیرد.
<div> Number Of Clicks <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: clickMe">Click me</button> </div> <script type="text/javascript"> var viewModel = { numberOfClicks : ko.observable(0), clickMe: function() { var previousCount = this.numberOfClicks(); this.numberOfClicks(previousCount + 1); } }; </script>
*نکته اول: اگر قصد داشته باشیم که عنصر جاری در viewModel را به گرداننده رویداد پاس دهیم چه باید کرد؟
هنگام فراخوانی رویدادها، KO به صورت پیش فرض مقدار جاری مدل را به عنوان اولین پارامتر به این گرداننده پاس میدهد. این روش مخصوصا در هنگامی که قصد اجرای عملیاتی خاص بر روی تک تک عناصر یک مجموعه را داشته باشید(مثل حلقه foreach) بسیار مفید خواهد بود.
<ul data-bind="foreach: places"> <li> <span data-bind="text: $data"></span> <button data-bind="click: $parent.removePlace">Remove</button> </li> </ul> <script type="text/javascript"> function MyViewModel() { var self = this; self.places = ko.observableArray(['Tehran', 'Esfahan', 'Shiraz']); self.removePlace = function(place) { self.places.remove(place) } } ko.applyBindings(new MyViewModel()); </script>
همان طور که پست قبل توضیح داده شد؛ برای اینکه بتوانیم از یک viewModel به مجموعه از عناصر در یک حلقه foreach مقید کنیم امکان استفاده از اشاره گر this میسر نیست. در نتیجه بهتر است در ابتدای viewModel مقدار این اشاره گر را در یک متغیر معمولی (در اینجا به نام self است) ذخیره کنیم و از این پس این متغیر را برای اشاره به عناصر viewModel به کار بریم. در اینجا self به عنواتن یک alias برای this خواهد بود.
*نکته دوم: دسترسی به عنصر رویداد
در بعضی مواقع نیاز است در حین فراخوانی رویداد ،عنصر رویداد DOM به عنوان فرستنده در اختیار تابع گرداننده قرار گیرد. خبر خوش این است که KO به صورت پیش فرض این عنصر را نیز به عنوان پارامتر دوم به توابع گرداننده رویداد پاس میدهد. برای مثال:
<button data-bind="click: myFunction"> Click me </button> <script type="text/javascript"> var viewModel = { myFunction: function(data, event) { if (event.shiftKey) { } else { } } }; ko.applyBindings(viewModel); </script>
*نکته سوم: به صورت پیش فرض KO از اجرای عملیات پیش فرض رویدادها جلوگیری به عمل میآورد. این به این معنی است که اگر برای رویداد کلیک تگ a بک تابع گرداننده تعریف کرده باشید، بعد از کلیک بر روی این المان؛ مرورگر فقط این تابع تعریف شده توسط شما را فراخوانی خواهد کرد و دیگر عملیات راهبری به صفحه مورد نظر در خاصیت href صورت نخواهد گرفت. اگر به هر دلیلی قصد داشته باشیم که این رفتار صورت نگیرد کافیست در انتهای تابع گرداننده رویداد مقدار true برگشت داده شود.
*نکته چهارم: مفهوم clickBubble
ابتدا به کد زیر دقت کنید:
<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler"> Click me </button> </div>
<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button> </div>
نحوه اضافه کردن چند پروژه در vs code
Visual Studio Code doesn't support solution files, whereas Visual Studio does. In Visual Studio we use solution files to link multiple projects together, and at first I thought that this was going to be a deal breaker for Visual Studio Code - but it's not at all. Many people aren't aware that Visual Studio Code, although lightweight, is a powerful editor that can do most of the things you need.
ده گام برای امنیت نرم افزار
OWASP’s Top 10 Risk List is an important tool for security engineers and compliance analysts. It describes the 10 worst security problems that are found in web and mobile applications today. But, on its own, it’s not much help to developers, so OWASP has come up with a list of 10 things that you can do as a developer to make sure that your code is safe and secure.
Tools -> Code Snippets Manager (Ctrl+K,Ctrl+B)
در ویژوال استودیو 2010 دو نوع snippet وجود دارد :
1- Expansion snippets : که در محل کرسر (Cursor) اضافه میشوند . مثل cw و enum که به ترتیب دستور writeLine و ساختار یک enum را ایجاد میکنند .
2- SurroundsWith snippets : که میتوانند یک تکه کد انتخاب شده را در بر بگیرند مثل for و یا do که کد انتخاب شده را در یک حلقه for و do-while محصور میکنند .
نکته ای که باید توجه داشت این است که یک snippet میتواند از هر دو نوع باشد . برای مثال for و do و یا if ، در صورتی که کدی انتخاب شده باشد آن را محصور میکنند و گرنه ساختار خالی مرتبط را در محل cursor اضافه میکنند .
همانطور که در ابتدا هم ذکر شد ، علاوه بر snippetهای آمادهی موجود ، توسعه دهنده میتواند قطعه کدهایی را خود ایجاد کرده و مورد استفاده قرار دهد .
در اینجا یک expansion snippet خواهیم ساخت تا کار اضافه کردن بلاک try-catch-finally را برای ما انجام دهد .
- ابتدا یک فایل xml به پروژه اضافه میکنیم و آنرا TryCatchFinally.snippet مینامیم . توجه کنید که نام فایل باید به .snippet ختم شود .
- فایل را باز و درون آن راست کلیک کرده و گزینه Insert snippet > Snippet را انتخاب میکنیم . با اینکار یک قالب پایه snippet ( که یک ساختار xml ) است به فایل اضافه میشود . هر فایل snippet از دو بخش اصلی header و snippet تشکیل شده که بخش header اطلاعاتی کلی درباره قطعه کد را نگهداری میکند و بخش snippet مربوط به تعریف محتوای قطعه کد است .
<codesnippet format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <header> <title>title</title> <author>author</author> <shortcut>shortcut</shortcut> <description>description</description> <snippettypes> <snippettype>SurroundsWith</snippettype> <snippettype>Expansion</snippettype> </snippettypes> </header> <snippet> <declarations> <literal> <id>name</id> <default>value</default> </literal> </declarations> <code language="XML"> <!--[CDATA[<test--> <name>$name$</name> $selected$ $end$]]> </code> </snippet> </codesnippet>
- قالب پیش فرض شامل هر دو نوع snippet است .
<codesnippet format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <header> ... <snippettypes> <snippettype>SurroundsWith</snippettype> <snippettype>Expansion</snippettype> </snippettypes> </header> ... </codesnippet>
از آنجا که قصد داریم یک Expansion snippet بسازیم پس تگ SurroundsWith را حذف میکنیم .
<snippettypes> <snippettype>Expansion</snippettype> </snippettypes>
- در بخش header مقدار تگ Title را به “Try Catch Finally”و مقدار تگ Shortcut را به “trycf” و Description را به “Adds a try-catch-finally block ” تغییر میدهیم . Title عنوان snippet است و وجود آن ضروری است . اضافه کردن shortcut اختیاری است و به عنوان یک متن میانبر برای اضافه کردن snippet استفاده میشود .
<Header> <Title>Try Catch Finally</Title> <Author>mohsen.d</Author> <Shortcut>trycf</Shortcut> <Description>Adds a try-catch-finally block</Description>
- تگ Literal برای تعریف جایگزین برای بخشی از کد درون snippet که احتمال دارد پس از اضافه شدن ، توسط برنامه نویس و یا در صورت استفاده از function توسط خود ویژوال استودیو تغییر کند استفاده میشود . در قطعه کد try-catch-finally ، ما میخواهیم به کاربر اجازه بدهیم که نوع استثنائی را که catch میشود تغییر دهد .
تگ id نامی برای بخش قابل ویرایش تعریف میکند ( که از آن در ادامه در تعریف خود قطعه کد استفاده میکنیم ) . آنرا به “ExceptionName” تغییر میدهیم . تگ default هم مقدار پیش فرضی را برای آن بخش مشخص میکند . ما میخواهیم تمام استثناها را Catch کنیم پس مقدار پیش فرض را برابر "Exception" قرار میدهیم .
..... <declarations> <literal> <id>ExceptionName</id> <default>Exception</default> </literal> </declarations> ...
- و در تگ Code ، خود قطعه کدی که ویژوال استودیو باید آن را اضافه کند ، تعریف میشود . مقدار مشخصه Language آن را به CSharp تغییر میدهیم و محتویات داخل آنرا به شکل زیر اضافه میکنیم .
<code language="CSharp"> <!--[CDATA[ try { $end$ } catch($ExceptionName$) { } finally { } ]]--> </code>
به نحوه استفاده از ExceptionName که در قسمت Literal تعریف کردیم توجه کنید . عبارت $end$ هم یک کلمه رزرو شده است که محل قرار گرفتن cursor را بعد از اضافه شدن قطعه کد مشخص میکند .
- در نهایت snippet ما به شکل زیر خواهد بود :
<codesnippet format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> <header> <title>Try Catch Finally</title> <author>mohsen.d</author> <shortcut>trycf</shortcut> <description>Adds a try-catch-finally block</description> <snippettypes> <snippettype>Expansion</snippettype> </snippettypes> </header> <snippet> <declarations> <literal> <id>ExceptionName</id> <default>Exception</default> </literal> </declarations> <code language="CSharp"> <!--[CDATA[ try { $end$ } catch($ExceptionName$) { } finally { } ]]--> </code> </snippet> </codesnippet>
اضافه کردن snippet ساخته شده به visual studio
دو راه برای اضافه کردن snippet تعریف شده به ویژوال استودیو وجود دارد :
روش اول قرار دادن فایل .snippet در پوشه code snippets ویژوال استودیو است که مسیر پیش فرض آن
C:\Users\<UserName>\Documents\Visual Studio 2010\Code Snippets\
گزینه دوم import کردن فایل .snippet به داخل ویژوال استودیو است . در ویژوال استودیو به مسیر
Tools -> Code Snippets Manager (Ctrl+K,Ctrl+B)
استفاده از snippet ساخته شده
برای استفاده از snippet میتوانیم متن میانبر تعریف شده را تایپ کنیم و با دو بار فشردن کلید tab قطعه کد تعریف شده به محل کرسر اضافه میشودهمینطور با فشردن کلیدهای Ctrl+K و Ctrl+X به صورت پشت سر هم منوی “Insert Snippet” ظاهر میشود که از طریق آن میتوانیم Snippet موردنظر را یافته ( بدنبال Title تعریف شده برای snippet در پوشه ای که آنرا ذخیره کرده اید بگردید ) و با انتخاب آن کد تعریف شده اضافه خواهد شد .
برای آشنایی با روشهای مختلف دسترسی به snippetها اینجا را بررسی کنید .
ابزارها
در این پروژه هم مجموعه snippetهای موجود ویژوال استودیو 2010 برای زبان سی شارپ ، جهت سازگاری با stylecop ویرایش و refactor شده اند ( در کنار تعریف snippetهای دیگر ).
نکات جالبی درباره Breakpoints
Have you ever found a bug in your code and wanted to pause code execution to inspect the problem? If you are a developer, there’s a strong chance you have experienced or will experience this issue many, many times. While the short and sweet answer to this problem is to use a breakpoint, the longer answer is that Visual Studio actually provides multiple kinds of breakpoints and methods that let you pause your code depending on the context! Based on the different scenarios you may experience while debugging, here are some of the various ways to pause your code and set or manage a breakpoint in Visual Studio 2017