آموزش کار با Template ها در Kendo

در این مقاله نحوه کار با Template ها در Kendo را خواهید آموخت. کار با Template های Kendo ساده بوده و دارای عملکرد بالا برای موتور Template جاوااسکریپت در فریم ورک Kendo می باشد.

Template ها یک راه برای ایجاد تکه کدهای html است که می توانند به طور خودکار با داده های جاوااسکریپت هم ادغام شوند.

توضیحات

در این مقاله به بررسی نکات زیر می پردازیم :

1- استفاده از Template در Kendo UI

2- کار با Data source در Kendo template

3- اتصال از راه دور در kendo template

استفاده از Template در Kendo UI

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
    <title></title>  
</head>  
<body>  
    <div class="container" id="example1"></div>  
    <script id="product-template1" type="text/x-kendo-template">  
        <h3>کندو به همراه تاریخ میلادی Template</h3>
        </br>  
        <article>  
            <time> #= new Date().toLocaleDateString() #</time>  
        </article>  
    </script>  
    <script>  
        var template1 = kendo.template($("#product-template1").html());  
        $('#example1').html(template1);  
    </script>    
      
</body>  
</html>

خروجی در مرورگر

کار با Data source در Kendo template

    <div id="products" dir="rtl"></div>

    <script type="text/x-kendo-template" id="template">
        <table class="tabl">
            <tr>
                <td><label>نام:</label></td>
                <td><label>  #:FirstName# </label></td>
            </tr>
            <tr>
                <td><label>نام خانوادگی:</label></td>
                <td><label>   #:LastName# </label></td>
            </tr>

        </table>
    </script>

JavaScript

<script>
    $(function () {
        var template = kendo.template($("#template").html());

        var dataSource = new kendo.data.DataSource({

            data: [
          { FirstName: "بردیا", LastName: "اجاقی" },
          { FirstName: "علی", LastName: "تمیمی" }
            ],
            change: function () {
                $("#products").html(kendo.render(template, this.view()));
            }
        });

        dataSource.read();
    });


</script>

خروجی در مرورگر

اتصال از راه دور در kendo template

با استفاده از اسکریپت زیر بانک را ایجاد می کنیم.

USE [master]
GO
/****** Object:  Database [TestKendo]    Script Date: 10/25/2015 10:41:44 ******/
CREATE DATABASE [TestKendo] ON  PRIMARY 
( NAME = N'TestKendo', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\TestKendo.mdf' , SIZE = 2304KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
 LOG ON 
( NAME = N'TestKendo_log', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\TestKendo_log.LDF' , SIZE = 504KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO
ALTER DATABASE [TestKendo] SET COMPATIBILITY_LEVEL = 100
GO
IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [TestKendo].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO
ALTER DATABASE [TestKendo] SET ANSI_NULL_DEFAULT OFF
GO
ALTER DATABASE [TestKendo] SET ANSI_NULLS OFF
GO
ALTER DATABASE [TestKendo] SET ANSI_PADDING OFF
GO
ALTER DATABASE [TestKendo] SET ANSI_WARNINGS OFF
GO
ALTER DATABASE [TestKendo] SET ARITHABORT OFF
GO
ALTER DATABASE [TestKendo] SET AUTO_CLOSE OFF
GO
ALTER DATABASE [TestKendo] SET AUTO_CREATE_STATISTICS ON
GO
ALTER DATABASE [TestKendo] SET AUTO_SHRINK OFF
GO
ALTER DATABASE [TestKendo] SET AUTO_UPDATE_STATISTICS ON
GO
ALTER DATABASE [TestKendo] SET CURSOR_CLOSE_ON_COMMIT OFF
GO
ALTER DATABASE [TestKendo] SET CURSOR_DEFAULT  GLOBAL
GO
ALTER DATABASE [TestKendo] SET CONCAT_NULL_YIELDS_NULL OFF
GO
ALTER DATABASE [TestKendo] SET NUMERIC_ROUNDABORT OFF
GO
ALTER DATABASE [TestKendo] SET QUOTED_IDENTIFIER OFF
GO
ALTER DATABASE [TestKendo] SET RECURSIVE_TRIGGERS OFF
GO
ALTER DATABASE [TestKendo] SET  ENABLE_BROKER
GO
ALTER DATABASE [TestKendo] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO
ALTER DATABASE [TestKendo] SET DATE_CORRELATION_OPTIMIZATION OFF
GO
ALTER DATABASE [TestKendo] SET TRUSTWORTHY OFF
GO
ALTER DATABASE [TestKendo] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO
ALTER DATABASE [TestKendo] SET PARAMETERIZATION SIMPLE
GO
ALTER DATABASE [TestKendo] SET READ_COMMITTED_SNAPSHOT ON
GO
ALTER DATABASE [TestKendo] SET HONOR_BROKER_PRIORITY OFF
GO
ALTER DATABASE [TestKendo] SET  READ_WRITE
GO
ALTER DATABASE [TestKendo] SET RECOVERY FULL
GO
ALTER DATABASE [TestKendo] SET  MULTI_USER
GO
ALTER DATABASE [TestKendo] SET PAGE_VERIFY CHECKSUM
GO
ALTER DATABASE [TestKendo] SET DB_CHAINING OFF
GO
EXEC sys.sp_db_vardecimal_storage_format N'TestKendo', N'ON'
GO
USE [TestKendo]
GO
/****** Object:  Table [dbo].[Products]    Script Date: 10/25/2015 10:41:44 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Products](
	[ProductID] [int] IDENTITY(1,1) NOT NULL,
	[ProductName] [nvarchar](max) NOT NULL,
	[UnitPrice] [nvarchar](max) NOT NULL,
 CONSTRAINT [PK_dbo.Products] PRIMARY KEY CLUSTERED 
(
	[ProductID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Products] ON
INSERT [dbo].[Products] ([ProductID], [ProductName], [UnitPrice]) VALUES (1, N'کفش', N'200')
INSERT [dbo].[Products] ([ProductID], [ProductName], [UnitPrice]) VALUES (2, N'صندلی', N'90')
SET IDENTITY_INSERT [dbo].[Products] OFF
/****** Object:  Table [dbo].[__MigrationHistory]    Script Date: 10/25/2015 10:41:44 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[__MigrationHistory](
	[MigrationId] [nvarchar](150) NOT NULL,
	[ContextKey] [nvarchar](300) NOT NULL,
	[Model] [varbinary](max) NOT NULL,
	[ProductVersion] [nvarchar](32) NOT NULL,
 CONSTRAINT [PK_dbo.__MigrationHistory] PRIMARY KEY CLUSTERED 
(
	[MigrationId] ASC,
	[ContextKey] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
INSERT [dbo].[__MigrationHistory] ([MigrationId], [ContextKey], [Model], [ProductVersion]) VALUES (N'201510130800346_InitialCreate', N'KendoListView.Models.ProductContext', 0x1F8B0800000000000400CD57CB6EE33614DD17E83F105CB540C6CC63330DA419A47652181327C128933D2D5D3B44F950492AB5BF6D16FDA4FE42AFAC97F5B06367A668E18D45DD7B78EEE17D507F7FFD2BF8B85292BC8075C2E8909E8D4E29011D9B44E8654833BF78F79E7EFCF0E30FC175A256E4A9B2BBC8EDD053BB903E7B9F5E32E6E26750DC8D9488AD7166E147B1518C27869D9F9EFEC2CECE182004452C4282CF99F642C1E6011FC746C790FA8CCB994940BA721DDF441B5472C715B894C710D24FA013732B9C7F12F0E7A8B0A7E44A0A8E5C22900B4AB8D6C6738F4C2FBF3888BC357A19A5B8C0E5E33A05B45B70E9A08CE0B2313F3498D3F33C18D638565071E6BC5147029E5D94EAB0AEFB9B34A6B57AA8DF35EAECD779D41B0D43FA604D92C59E92EE5E97636973BB618547A5DF0969BD3DA953023327FF9D9071267D6621D49079CBE50979C8E652C49F60FD687E071DEA4CCA6D8A4812DFB5167009B74BC1FAF56758B4894F2794B0B63BEBFAD7DE7DD722C2A9F617E794DC21153E9750E7C3961A9137167E030D967B481EB8F760F138A7096C14ED9118DE327FA836C53CC4A2A264C657B7A097FE39A4F897921BB182A45A29897CD1026B109DBCCD6080E8FECDD1DB3F5811FFEB5B07ACC9AF7ED661557B2E50C1B626F932AC8632108BB54C42576EDF0EB3808DC0B701B1FC1B1A450F18D5693E44B726D6F41956349AAA21B11D1D2998F1344529B73A54B942A2A23D8DDF45C757AD2A3058EC068AB7665BEF84A9C997D0798B5B23D31B619D9F70CFE73C3FAC71A27A669D63D82171B55947E96E9D36C2570EF9FFC2695F1FE9023542DE606C0A8B6C1326D47C9ACED5F3DC8C092EB9DD5DF6632333A55F6924076015F53C8056BC381C6FAB44B7D1B696FB5801EB48D43D0CD63B8D4EA3EC9EEEBEDAE89AD4BBD735D2A985A0CCCBD747782F510B134A50A41791E4491AAD9D0735CA0D46D11F722C05C6DB18CCB8160B70BE182914EBE87DE70EF0FF99C7CCB9441E3694FFE3B12872895F1D7C470EA38149A85FB88D9FB9FD49F1D5CFDF3EDD8E813B6E62F53BEA410369DF3C2A523DA4C9DC20FF826733C7DE38ADFA9517B0ED2B76300127960D447EE1D610E729DD80563653BD3095E418DA36A3CAA4732233F03C4185AEAC170B1EE3E998189CDB5C399EB8CCD0E45ACD2199EAFBCCA799BF720ED45CB62E5101DBBFFF6624B73907F769FEE4BE47084853600870AF7FCD844C6ADE370329B403224F96B26E90155EB9106EB9AE91EE8C3E10A8946F02290E50ACBA4750A9443077AF23FE026FE18637AB5B58F2785D35D0DD20AF1F445BF66022F8D272E54A8CC63FFF6C64F977E3877F003902BFEE690E0000, N'6.1.3-40302')

html

    <div id="products"></div>

<script type="text/x-kendo-template" id="template">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="form-inline">
                        <label>نام محصول:</label>


                        <label style="color:green">  #:ProductName# </label>
                    </div>
                </div>
                </div>
        
            <div class="row">
                <div class="col-lg-8">
                    <div class="form-inline">
                        <label>قیمت محصول:</label>
                    
             
                        <label style="color:green">   #:UnitPrice# </label>
                    </div>
                </div>

            </div>
            </div>

    </script>
<h3> <a href="http://www.barnamenevisan.org">مرجع تخصصی برنامه نویسان</a></h3>    

</body>
</html>

JavaScript

    <script>

        $(function () {
            var template = kendo.template($("#template").html());

            var dataSource = new kendo.data.DataSource({

                transport: {
                    read: {
                        url: "api/Products",
                        dataType: "json"
                    }
                },
                change: function () {
                    $("#products").html(kendo.render(template, this.view()));
                }
            });

            dataSource.read();
        });



    </script>

خروجی در مرورگر

نتیجه گیری

در این مقاله ما نحوه کار با Kendo template با یک روش مقدماتی به همراه کار با data source و همچنین remote binding (اتصال از راه دور) توسط Web API را آموختیم.

فایل های ضمیمه

3931_KendoTemplatee.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

آموزش کار با Template ها در Kendo

فایل های ضمیمه

برنامه نویسان

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