مشخصات مقاله
-
1388
-
0.0
-
3052
-
0
-
0
آموزش تنظیم Visual Studio 2013 برای توسعه Knockout.js
رمز فایل :tahlildadeh.com
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
تنظیم Visual Studio 2013 برای توسعه Knockout.js
مقدمه
Knockout.js یک کتابخانه JavaScript است برای ساخت برنامه های تحت وب به صورت تعاملی و responsive. Knockout الگوی طراحی Model-View-View Model (MVVM) را برای JavaScript، پیاده سازی می کند. در این مقاله به شما نشان خواهم داد چطور کار با Knockout.js شروع کنید.
مرحله 1
Visual Studio را باز کنید.
![clip_image001[12]](http://articles.tahlildadeh.com/image.axd?picture=clip_image001%5B12%5D_10.png "clip_image001[12]")
مرحله 2
برای ساخت وب سایت بر روی File>New>Website کلیک کنید.
![clip_image002[12]](http://articles.tahlildadeh.com/image.axd?picture=clip_image002%5B12%5D_5.png "clip_image002[12]")
مرحله 3
حالا باید کتابخانه Knockout.js را به وب سایتمان اضافه کنیم. برای این کار بر روی وب سایت راست کلیک کرده و گزینه Manage NuGet Packages را انتخاب کنید.
مرحله 4
در این مرحله باید کتابخانه knockout.js را جستجو کرده و بر روی وب سایت نصب کنیم. برای انجام این کار عبارت knockout.js را در کادر جستجو تایپ کرده و کتابخانه knockout.js را بر روی وب سایت نصب میکنیم.
![clip_image006[12]](http://articles.tahlildadeh.com/image.axd?picture=clip_image006%5B12%5D_1.png "clip_image006[12]")
پس از اتمام نصب، پنجره Manage Nuget Package را می بندیم.
مرحله 5
جهت استفاده از کتابخانه Knockout.js باید JQuery را در وب سایتمان نصب کرده باشیم. برای نصب JQuery نیز همان کارهایی را انجام می دهیم که برای نصب کتابخانه Knockout.js انجام دادیم.
مرحله 6
چک می کنیم تا ببینیم فولدر script به وب سایتمان اضافه شده باشد. فایل های Knockout.js و jQuery در این فولدر خواهند بود.
بنابراین فایل های JQuery و Knockout.js با موفقیت اضافه شده اند.
مرحله 7
باید یک Web Form به وب سایت اضافه کنیم. به همین منظور با راست کلیک کردن و انتخاب Add>Web Form این کار را انجام میدهیم.
سپس در پنجره ظاهر شده نام مورد نظر را برای آن تایپ می کنیم.
مرحله 8
قطعه کد زیر را در WebForm می نویسیم:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p> First Name :<span data-bind="text:firstName" /></p>
<p> Last Name :<span data-bind="text:LastName" /></p>
</div>
</form>
<script src="Scripts/knockout-3.3.0.js"></script>
<script type="text/javascript">
var vm =
{
firstName: "Yatendra",
LastName: "Sharma"
};
ko.applyBindings(vm);
</script>
</body>
</html>
مرحله 9
Web Form را مانند تصویر زیر طراحی می کنیم:
مرحله 10
وب سایت را با زدن کلید F5 اجرا می کنیم. پس از اجرا، پنجره زیر نمایش داده می شود:
این پنجره مبین این موضوع است که تابع ko.applyBindings(vm) به خوبی کار می کند.
جمع بندی
در این مقاله نشان داده شد که چگونه Visual Studio 2013 را برای توسعه knockout.js تنظیم کرده و چطور با knockout.js کار کنیم.
امیدوار هستم این مقاله برای مبتدیانی که تازه کار با knockout.js را شروع کرده یا با نصب آن در Visual Studio 2013 آشنا نیستند، مفید بوده باشد.