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

آموزش تنظیم 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]

مرحله 2

برای ساخت وب سایت بر روی File>New>Website کلیک کنید.

clip_image002[12]

مرحله 3

حالا باید کتابخانه Knockout.js را به وب سایتمان اضافه کنیم. برای این کار بر روی وب سایت راست کلیک کرده و گزینه Manage NuGet Packages را انتخاب کنید.

clip_image004

مرحله 4

در این مرحله باید کتابخانه knockout.js را جستجو کرده و بر روی وب سایت نصب کنیم. برای انجام این کار عبارت knockout.js را در کادر جستجو تایپ کرده و کتابخانه knockout.js را بر روی وب سایت نصب میکنیم.

clip_image006[12]

clip_image008

پس از اتمام نصب، پنجره Manage Nuget Package را می بندیم.

مرحله 5

جهت استفاده از کتابخانه Knockout.js باید JQuery را در وب سایتمان نصب کرده باشیم. برای نصب JQuery نیز همان کارهایی را انجام می دهیم که برای نصب کتابخانه Knockout.js انجام دادیم.

clip_image010

clip_image012

مرحله 6

چک می کنیم تا ببینیم فولدر script به وب سایتمان اضافه شده باشد. فایل های Knockout.js و jQuery در این فولدر خواهند بود.

clip_image013

بنابراین فایل های JQuery و Knockout.js با موفقیت اضافه شده اند.

مرحله 7

باید یک Web Form به وب سایت اضافه کنیم. به همین منظور با راست کلیک کردن و انتخاب Add>Web Form این کار را انجام میدهیم.

clip_image015

سپس در پنجره ظاهر شده نام مورد نظر را برای آن تایپ می کنیم.

clip_image016

مرحله 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 را مانند تصویر زیر طراحی می کنیم:

clip_image017

مرحله 10

وب سایت را با زدن کلید F5 اجرا می کنیم. پس از اجرا، پنجره زیر نمایش داده می شود:

clip_image018

این پنجره مبین این موضوع است که تابع ko.applyBindings(vm) به خوبی کار می کند.

جمع بندی

در این مقاله نشان داده شد که چگونه Visual Studio 2013 را برای توسعه knockout.js تنظیم کرده و چطور با knockout.js کار کنیم.

امیدوار هستم این مقاله برای مبتدیانی که تازه کار با knockout.js را شروع کرده یا با نصب آن در Visual Studio 2013 آشنا نیستند، مفید بوده باشد.

 

  • 1413
  •    836
  • تاریخ ارسال :   1394/09/07

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

ارسال

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

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