Tek Sayfalı Uygulama: KnockoutJS şablonuSingle Page Application: KnockoutJS template

, Mike te sonby Mike Wasson

Altını gizleme MVC şablonu, ASP.NET and Web Tools 2012,2 parçasıdırThe Knockout MVC Template is part of ASP.NET and Web Tools 2012.2

2012,2 ASP.NET and Web Tools indirinDownload ASP.NET and Web Tools 2012.2

ASP.NET and Web Tools 2012,2 güncelleştirmesi, ASP.NET MVC 4 için tek sayfalı uygulama (SPA) şablonu içerir.The ASP.NET and Web Tools 2012.2 update includes a Single-Page Application (SPA) template for ASP.NET MVC 4. Bu şablon, etkileşimli istemci tarafı Web uygulamalarını hızlıca oluşturmaya başlamanızı sağlamak için tasarlanmıştır.This template is designed to get you started quickly building interactive client-side web apps.

"Tek sayfalı uygulama" (SPA), tek bir HTML sayfası yükleyen bir Web uygulaması için genel bir terimdir ve sonra yeni sayfalar yüklemek yerine sayfayı dinamik olarak güncelleştirir."Single-page application" (SPA) is the general term for a web application that loads a single HTML page and then updates the page dynamically, instead of loading new pages. İlk sayfa yüklendikten sonra, SPA, AJAX istekleri aracılığıyla sunucuyla iletişim kuran bir iletişim yükler.After the initial page load, the SPA talks with the server through AJAX requests.

AJAX yeni bir şey değildir, ancak bugün büyük bir Gelişmiş SPA uygulaması oluşturmayı ve bakımını kolaylaştıran JavaScript çerçeveleri vardır.AJAX is nothing new, but today there are JavaScript frameworks that make it easier to build and maintain a large sophisticated SPA application. Ayrıca, HTML 5 ve CSS3 zengin Usıs oluşturmayı kolaylaştırır.Also, HTML 5 and CSS3 are making it easier to create rich UIs.

Bu işlemi kullanmaya başlamak için, SPA şablonu örnek bir "yapılacaklar listesi" uygulaması oluşturur.To get you started, the SPA template creates a sample "To-do list" application. Bu öğreticide, şablona yönelik kılavuzlu bir tura çıkacağız.In this tutorial, we'll take a guided tour of the template. İlk olarak yapılacaklar listesi uygulamasının kendisine bakacağız ve sonra çalışmasını sağlayan teknoloji parçalarını incelemektir.First we'll look at the To-do list application itself, then examine the technology pieces that make it work.

Yeni bir SPA şablonu projesi oluşturCreate a New SPA Template Project

Gereksinimler:Requirements:

  • Web için Visual Studio 2012 veya Visual Studio Express 2012Visual Studio 2012 or Visual Studio Express 2012 for Web
  • ASP.NET Web araçları 2012,2 güncelleştirmesi.ASP.NET Web Tools 2012.2 update. Güncelleştirmeyi burayayükleyebilirsiniz.You can install the update here.

Visual Studio 'Yu başlatın ve başlangıç sayfasından Yeni proje ' yi seçin.Start Visual Studio and select New Project from the Start page. Ya da Dosya menüsünde Yeni ' yi ve ardından Proje' yi seçin.Or, from the File menu, select New and then Project.

Şablonlar bölmesinde, yüklü şablonlar ' ı seçin ve görsel C# düğümünü genişletin.In the Templates pane, select Installed Templates and expand the Visual C# node. Görsel C# bölümünde Web' i seçin.Under Visual C#, select Web. Proje şablonları listesinde ASP.NET MVC 4 Web uygulaması' nı seçin.In the list of project templates, select ASP.NET MVC 4 Web Application. Projeyi adlandırın ve Tamam' a tıklayın.Name the project and click OK.

Yeni proje sihirbazında tek sayfalı uygulama' yı seçin.In the New Project wizard, select Single Page Application.

Uygulamayı derleyip çalıştırmak için F5'e basın.Press F5 to build and run the application. Uygulama ilk kez çalıştırıldığında, oturum açma ekranını görüntüler.When the application first runs, it displays a login screen.

"" bağlantısı ' na tıklayın ve yeni bir kullanıcı oluşturun.Click the "Sign up" link and create a new user.

Oturum açtıktan sonra, uygulama iki öğe ile varsayılan bir yapılacaklar listesi oluşturur.After you log in, the application creates a default Todo list with two items. Yeni bir liste eklemek için "yapılacaklar listesi ekle" seçeneğine tıklayabilirsiniz.You can click "Add Todo list" to add a new list.

Listeyi yeniden adlandırın, listeye öğe ekleyin ve bunları kapatın.Rename the list, add items to the list, and check them off. Ayrıca, öğeleri silebilir veya bir listenin tamamını silebilirsiniz.You can also delete items or delete an entire list. Değişiklikler, uygulamayı yerel olarak çalıştırdığınız için sunucudaki bir veritabanında otomatik olarak kalıcı hale getirilir (Bu noktada aslında Yereldb).The changes are automatically persisted to a database on the server (actually LocalDB at this point, because you are running the application locally).

SPA şablonunun mimarisiArchitecture of the SPA Template

Bu diyagramda uygulamanın ana yapı taşları gösterilmektedir.This diagram shows the main building blocks for the application.

Sunucu tarafında, ASP.NET MVC HTML 'yi sunar ve ayrıca form tabanlı kimlik doğrulamasını da işler.On the server side, ASP.NET MVC serves the HTML and also handles forms-based authentication.

ASP.NET Web API 'SI, ToDoLists ve Todoıtems ile ilgili tüm istekleri (alma, oluşturma, güncelleştirme ve silme dahil) işler.ASP.NET Web API handles all requests that relate to the ToDoLists and ToDoItems, including getting, creating, updating and deleting. İstemci verileri JSON biçiminde Web API 'SI ile değiş tokuş eder.The client exchanges data with Web API in JSON format.

Entity Framework (EF), O/RM katmanıdır.Entity Framework (EF) is the O/RM layer. ASP.NET 'ın nesne odaklı dünyası ve temel alınan veritabanı arasında ortalaştırır.It mediates between the object-oriented world of ASP.NET and the underlying database. Veritabanı LocalDB kullanır, ancak bunu Web. config dosyasında değiştirebilirsiniz.The database uses LocalDB but you can change this in the Web.config file. Genellikle Yereldb 'yi yerel geliştirme için kullanacaksınız ve sonra EF Code-First geçişini kullanarak sunucuda bir SQL veritabanına dağıtmanız gerekir.Typically you would use LocalDB for local development and then deploy to a SQL database on the server, using EF code-first migration.

İstemci tarafında, altını gizleme. js kitaplığı, AJAX isteklerindeki sayfa güncelleştirmelerini işler.On the client side, the Knockout.js library handles page updates from AJAX requests. Altını gizleme sayfayı en son verilerle eşleştirmek için veri bağlamayı kullanır.Knockout uses data binding to synchronize the page with the latest data. Bu şekilde, JSON verilerinde izlenecek ve DOM güncelleştiren koddan herhangi birini yazmanız gerekmez.That way, you don't have to write any of the code that walks through the JSON data and updates the DOM. Bunun yerine, bildirime dayalı öznitelikleri, verileri nasıl sunacaklarını belirten HTML 'ye yerleştirebilirsiniz.Instead, you put declarative attributes in the HTML that tell Knockout how to present the data.

Bu mimarinin büyük bir avantajı, sunu katmanını uygulama mantığından ayırmadır.A big advantage of this architecture is that it separates the presentation layer from the application logic. Web sayfanızın nasıl görüneceğine ilişkin hiçbir şey bilmeden Web API bölümünü oluşturabilirsiniz.You can create the Web API portion without knowing anything about how your web page will look. İstemci tarafında, bu verileri temsil etmek için bir "model görüntüle" oluşturursunuz ve görünüm modeli HTML 'e bağlamak için altını gizleme kullanır.On the client side, you create a "view model" to represent that data, and the view model uses Knockout to bind to the HTML. Bu, görünüm modelini değiştirmeden HTML 'yi kolayca değiştirmenize olanak sağlar.That lets you easily change the HTML without changing the view model. (Daha sonra bir bit altını gizleme bölümüne bakacağız.)(We'll look at Knockout a bit later.)

ModellerModels

Visual Studio projesinde modeller klasörü, sunucu tarafında kullanılan modelleri içerir.In the Visual Studio project, the Models folder contains the models that are used on the server side. (Ayrıca, istemci tarafında modeller de vardır; bunlar için de bir alan olacaktır.)(There are also models on the client side; we'll get to those.)

TodoItem, TodoListTodoItem, TodoList

Bunlar, Entity Framework Code First için veritabanı modelleridir.These are the database models for Entity Framework Code First. Bu modellerin birbirini işaret eden özellikleri olduğunu unutmayın.Notice that these models have properties that point to each other. ToDoList bir Todoıtems koleksiyonu içerir ve her ToDoItem üst ToDoList geri başvurusu vardır.ToDoList contains a collection of ToDoItems, and each ToDoItem has a reference back to its parent ToDoList. Bu özelliklere, gezinti özellikleri adı verilir ve tek-çok ilişkisini ve yapılacaklar listesini ve yapılacaklar öğelerini temsil eder.These properties are called navigation properties, and they represent the one-to-many relation a to-do list and its to-do items.

ToDoItem sınıfı, ToDoListId ToDoList tabloya yabancı anahtar olduğunu belirtmek için [Yabancıkey] özniteliğini de kullanır.The ToDoItem class also uses the [ForeignKey] attribute to specify that ToDoListId is a foreign key into the ToDoList table. Bu, veritabanına yabancı anahtar kısıtlaması ekleneceğini söyler.This tells EF to add a foreign-key constraint to the database.

[ForeignKey("TodoList")]
public int TodoListId { get; set; }
public virtual TodoList TodoList { get; set; }

TodoItemDto, TodoListDtoTodoItemDto, TodoListDto

Bu sınıflar istemciye gönderilecek verileri tanımlar.These classes define the data that will be sent to the client. "DTO", "veri aktarımı nesnesi" anlamına gelir."DTO" stands for "data transfer object." CTO, varlıkların JSON olarak nasıl serileştirilme şeklini tanımlar.The DTO defines how the entities will be serialized into JSON. Genel olarak, DTOs kullanmanın birkaç nedeni vardır:In general, there are several reasons to use DTOs:

  • Hangi özelliklerin serileştirildiği denetlemek için.To control which properties are serialized. DTO, etki alanı modelinden özelliklerin bir alt kümesini içerebilir.The DTO can contain a subset of the properties from the domain model. Bunu güvenlik nedenleriyle (hassas verileri gizlemek için) veya yalnızca göndereceğiniz veri miktarını azaltmak için yapabilirsiniz.You might do this for security reasons (to hide sensitive data) or simply to reduce the amount of data that you send.
  • Verilerin şeklini değiştirmek için: Örneğin, daha karmaşık bir veri yapısını düzleştirmek için.To change the shape of the data – e.g. to flatten a more complex data structure.
  • Herhangi bir iş mantığını DTO dışında tutmak için (kaygıları ayrımı).To keep any business logic out of the DTO (separation of concerns).
  • Etki alanı modelleriniz bazı nedenlerle serileştirilemiyor.If your domain models cannot be serialized for some reason. Örneğin, bir nesneyi seri hale getirmek istediğinizde döngüsel başvurular soruna neden olabilir (bkz. Döngüsel nesne başvurularını işleme); Ancak, bir DFOR kullanarak sorunu tamamen önler.For example, circular references can cause problems when you serialize an object There are ways to handle this problem in Web API (see Handling Circular Object References); but using a DTO simply avoids the problem altogether.

SPA şablonunda DTOs, etki alanı modelleriyle aynı verileri içerir.In the SPA template, the DTOs contains the same data as the domain models. Ancak, gezinti özelliklerinden döngüsel başvuruları önlemediği ve genel DTO düzenlerini gösterdikleri için bunlar hala yararlıdır.However, they are still useful because they avoid circular references from the navigation properties, and they demonstrate the general DTO pattern.

AccountModels.csAccountModels.cs

Bu dosya, site üyeliği için modeller içerir.This file contains models for site membership. UserProfile sınıfı, üyelik VERITABANıNDAKI Kullanıcı profillerinin şemasını tanımlar.The UserProfile class defines the schema for user profiles in the membership DB. (Bu durumda, tek bilgi Kullanıcı KIMLIĞI ve kullanıcı adıdır.) Bu dosyadaki diğer model sınıfları, Kullanıcı kaydı ve oturum açma formları oluşturmak için kullanılır.(In this case, the only information is the user ID and the user name.) The other model classes in this file are used to create the user registration and login forms.

Varlık ÇerçevesiEntity Framework

SPA şablonu EF Code First kullanır.The SPA template uses EF Code First. Code First geliştirmek için, önce kod içinde modelleri tanımlar, sonra EF veritabanını oluşturmak için modeli kullanır.In Code First development, you define the models first in code, and then EF uses the model to create the database. Aynı zamanda var olan bir veritabanı (Database First) ile EF de kullanabilirsiniz.You can also use EF with an existing database (Database First).

Modeller klasöründeki TodoItemContext sınıfı DbContext'ten türetiliyor.The TodoItemContext class in the Models folder derives from DbContext. Bu sınıf modeller ve EF arasında "tutkalla" sağlar.This class provides the "glue" between the models and EF. TodoItemContext, bir ToDoItem koleksiyonu ve bir TodoList koleksiyonu barındırır.The TodoItemContext holds a ToDoItem collection and a TodoList collection. Veritabanını sorgulamak için, bu koleksiyonlara yönelik bir LINQ sorgusu yazmanız yeterlidir.To query the database, you simply write a LINQ query against these collections. Örneğin, "Gamze" kullanıcısı için tüm yapılacaklar listelerini nasıl seçebileceğiniz aşağıda verilmiştir:For example, here is how you can select all of the to-do lists for user "Alice":

TodoItemContext db = new TodoItemContext();
IEnumerable<TodoList> lists = 
    from td in db.TodoLists where td.UserId == "Alice" select td;

Ayrıca, koleksiyona yeni öğeler ekleyebilir, öğeleri güncelleştirebilir veya öğeleri koleksiyondan silebilir ve değişiklikleri veritabanında kalıcı hale getirebilirsiniz.You can also add new items to the collection, update items, or delete items from the collection, and persist the changes to the database.

ASP.NET Web API 'SI denetleyicileriASP.NET Web API Controllers

ASP.NET Web API 'sinde, denetleyiciler HTTP isteklerini işleyen nesnelerdir.In ASP.NET Web API, controllers are objects that handle HTTP requests. Belirtildiği gibi, SPA şablonu, ToDoList ve ToDoItem örneklerine CRUD işlemlerini etkinleştirmek için Web API kullanır.As mentioned, the SPA template uses Web API to enable CRUD operations on ToDoList and ToDoItem instances. Denetleyiciler, çözümün denetleyiciler klasöründe bulunur.The controllers are located in the Controllers folder of the solution.

  • TodoController: Yapılacaklar öğeleri için HTTP isteklerini IşlerTodoController: Handles HTTP requests for to-do items
  • TodoListController: Yapılacaklar listeleri için HTTP isteklerini Işler.TodoListController: Handles HTTP requests for to-do lists.

Web API 'SI, denetleyici adı URI yoluyla eşleştiğinden, bu adlar önemlidir.These names are significant, because Web API matches the URI path to the controller name. (Web API 'sinin denetleyicilere HTTP isteklerini nasıl yönlendirdiğini öğrenmek için bkz. ASP.NET Web API 'de yönlendirme.)(To learn how Web API routes HTTP requests to controllers, see Routing in ASP.NET Web API.)

ToDoListController sınıfına bakalım.Let's look at the ToDoListController class. Tek bir veri üyesi içerir:It contains a single data member:

private TodoItemContext db = new TodoItemContext();

TodoItemContext, daha önce açıklandığı gibi EF ile iletişim kurmak için kullanılır.The TodoItemContext is used to communicate with EF, as described earlier. Denetleyicideki Yöntemler CRUD işlemlerini uygular.The methods on the controller implement the CRUD operations. Web API 'SI, istemciden denetleyici yöntemlerine HTTP isteklerini aşağıdaki gibi eşleştirir:Web API maps HTTP requests from the client to controller methods, as follows:

HTTP IsteğiHTTP Request Controller yöntemiController Method AçıklamaDescription
/Api/TODO AlGET /api/todo GetTodoLists Yapılacaklar listelerinin koleksiyonunu alır.Gets a collection of to-do lists.
/Api/Todo/KIMLIĞI alGET /api/todo/id GetTodoList KIMLIĞE göre yapılacaklar listesini alırGets a to-do list by ID
/Api/Todo/ID koyPUT /api/todo/id PutTodoList Yapılacaklar listesini güncelleştirir.Updates a to-do list.
Todo/api/gönderinPOST /api/todo PostTodoList Yeni bir yapılacaklar listesi oluşturur.Creates a new to-do list.
/Api/Todo/KIMLIĞINI SilDELETE /api/todo/id DeleteTodoList YAPıLACAKLAR listesini siler.Deletes a TODO list.

Bazı işlemler için URI 'Lerin ID değeri için yer tutucular içerdiğini unutmayın.Notice that the URIs for some operations contain placeholders for the ID value. Örneğin, KIMLIĞI 42 olan bir yapılacaklar listesini silmek için URI /api/todo/42.For example, to delete a to-list with an ID of 42, the URI is /api/todo/42.

CRUD işlemleri için Web API kullanma hakkında daha fazla bilgi edinmek için bkz. CRUD Işlemlerini destekleyen bir Web API 'Si oluşturma.To learn more about using Web API for CRUD operations, see Creating a Web API that Supports CRUD Operations. Bu denetleyicinin kodu oldukça basittir.The code for this controller is fairly straightforward. İşte bazı ilginç noktaları:Here are some interesting points:

  • GetTodoLists yöntemi, oturum açmış kullanıcının KIMLIĞINE göre sonuçları filtrelemek için bir LINQ sorgusu kullanır.The GetTodoLists method uses a LINQ query to filter the results by the ID of the logged-in user. Bu şekilde, bir Kullanıcı yalnızca kendisine ait olan verileri görür.That way, a user only sees the data that belongs to him or her. Ayrıca, ToDoList örneklerini TodoListDto örneklerine dönüştürmek için SELECT ifadesinin kullanıldığına dikkat edin.Also, notice that a Select statement is used to convert the ToDoList instances into TodoListDto instances.
  • PUT ve POST yöntemleri, veritabanını değiştirmeden önce model durumunu denetler.The PUT and POST methods check the model state before modifying the database. ModelState. IsValid yanlış ise, bu yöntemler HTTP 400, hatalı istek döndürür.If ModelState.IsValid is false, these methods return HTTP 400, Bad Request. Model doğrulamasındaWeb API 'sinde model doğrulama hakkında daha fazla bilgi edinin.Read more about model validation in Web API at Model Validation.
  • Denetleyici sınıfı, [Yetkilendir] özniteliğiyle de donatılmış.The controller class is also decorated with the [Authorize] attribute. Bu öznitelik, HTTP isteğinin kimlik doğrulamasının yapılıp yapılmayacağını denetler.This attribute checks whether the HTTP request is authenticated. İsteğin kimliği doğrulanmıyorsa, istemci HTTP 401, yetkisiz olarak alır.If the request is not authenticated, the client receives HTTP 401, Unauthorized. ASP.NET Web API 'Sinde kimlik doğrulaması ve yetkilendirmehakkında daha fazla bilgi edinin.Read more about authentication at Authentication and Authorization in ASP.NET Web API.

TodoController sınıfı TodoListControllerçok benzer.The TodoController class is very similar to TodoListController. En büyük fark, her bir GET yöntemini tanımlamaz çünkü istemci her yapılacaklar listesi ile birlikte yapılacaklar öğelerini alır.The biggest difference is that it does not define any GET methods, because the client will get the to-do items along with each to-do list.

MVC denetleyicileri ve görünümleriMVC Controllers and Views

MVC denetleyicileri çözümün denetleyiciler klasöründe de bulunur.The MVC controllers are also located in the Controllers folder of the solution. HomeController uygulama için ana HTML 'i işler.HomeController renders the main HTML for the application. Ana denetleyicinin görünümü Görünümler/Home/Index. cshtml içinde tanımlanır.The view for the Home controller is defined in Views/Home/Index.cshtml. Giriş görünümü, kullanıcının oturum açmış olmasına bağlı olarak farklı içerikleri işler:The Home view renders different content depending on whether the user is logged in:

@if (@User.Identity.IsAuthenticated)
{
    // ....
}

Kullanıcılar oturum açtığında, ana Kullanıcı arabirimini görürler.When users are logged in, they see the main UI. Aksi takdirde, oturum açma paneli görüntülenir.Otherwise, they see the login panel. Bu Koşullu işleme sunucu tarafında gerçekleştiğine unutmayın.Note that this conditional rendering happens on the server side. İstemci tarafında—gizli içeriği gizlemeyi hiçbir şey, ham http iletilerini izleyen bir kişiye görünür.Never try to hide sensitive content on the client side—anything that you send in an HTTP response is visible to someone who is watching the raw HTTP messages.

İstemci tarafı JavaScript ve altını gizleme. jsClient-Side JavaScript and Knockout.js

Şimdi uygulamanın sunucu tarafını istemciye etkinleştirelim.Now let's turn from the server side of the application to the client. SPA şablonu, sorunsuz ve etkileşimli bir kullanıcı arabirimi oluşturmak için jQuery ve altını gizleme. js birleşimini kullanır.The SPA template uses a combination of jQuery and Knockout.js to create a smooth, interactive UI. Altını gizleme. js, HTML 'yi verilere bağlamayı kolaylaştıran bir JavaScript kitaplığıdır.Knockout.js is a JavaScript library that makes it easy to bind HTML to data. Altını gizleme. js, "Model-View-ViewModel" adlı bir model kullanır.Knockout.js uses a pattern called "Model-View-ViewModel."

  • Model, etki alanı verileri (ToDo listeleri ve Yapılacaklar öğeleri).The model is the domain data (ToDo lists and ToDo items).
  • Görünüm HTML belgesidir.The view is the HTML document.
  • View-model, model verilerini tutan bir JavaScript nesnesidir.The view-model is a JavaScript object that holds the model data. View-model, Kullanıcı arabiriminin kod soyutlamasıdır.The view-model is a code abstraction of the UI. HTML temsili bilgisine sahip değildir.It has no knowledge of the HTML representation. Bunun yerine, görünümün soyut özelliklerini temsil eder, örneğin "ToDo öğeleri listesi".Instead, it represents abstract features of the view, such as "a list of ToDo items".

Görünüm, görünüm modeline veri ile bağlanır.The view is data-bound to the view-model. Görünüm modeli güncelleştirmeleri otomatik olarak görünüme yansıtılır.Updates to the view-model are automatically reflected in the view. Bağlamalar diğer yönle de çalışır.Bindings work the other direction as well. DOM 'daki Olaylar (tıklama gibi), AJAX çağrılarını tetikleyen görünüm modelindeki işlevlere veri bağımlıdır.Events in the DOM (such as clicks) are data-bound to functions on the view model, which trigger AJAX calls.

SPA şablonu, istemci tarafı JavaScript 'ı üç katmana düzenler:The SPA template organizes the client-side JavaScript into three layers:

  • Todo. DataContext. js: AJAX istekleri gönderir.todo.datacontext.js: Sends AJAX requests.
  • Todo. model. js: modelleri tanımlar.todo.model.js: Defines the models.
  • Todo. ViewModel. js: görünüm modelini tanımlar.todo.viewmodel.js: Defines the view model.

Bu betik dosyaları, çözümün betikler/App klasöründe bulunur.These script files are located in the Scripts/app folder of the solution.

Todo. DataContext , Web API denetleyicilerine YÖNELIK tüm Ajax çağrılarını işler.todo.datacontext handles all AJAX calls to the Web API controllers. (Oturum açma için AJAX çağrıları, başka bir yerde, ajaxLogin. js ' de tanımlanır.)(The AJAX calls for logging in are defined elsewhere, in ajaxlogin.js.)

Todo. model. js Yapılacaklar listeleri için istemci tarafı (tarayıcı) modellerini tanımlar.todo.model.js defines the client-side (browser) models for the to-do lists. İki model sınıfı vardır: TodoItem ve todoList.There are two model classes: todoItem and todoList.

Model sınıflarında birçok özellik "Ko. Observable" türündedir.Many of the properties in the model classes are of type "ko.observable". Gözlemlenenler, altını gizleme 'nin Magic 'i nasıl yapar.Observables are how Knockout does its magic. Gizleme belgelerinden: bir observable, abonelere değişiklikler hakkında bildirimde bulunan bir "JavaScript nesnesidir".From the Knockout documentation: An observable is a "JavaScript object that can notify subscribers about changes." Bir observable değeri değiştiğinde, altını gizleme bu gözlemlenenler ilişkili HTML öğelerini güncelleştirir.When the value of an observable changes, Knockout updates any HTML elements that are bound to those observables. Örneğin, TodoItem başlık ve Isdone özellikleri için gözlemlenenler sahiptir:For example, todoItem has observables for the title and isDone properties:

self.title = ko.observable(data.title);
self.isDone = ko.observable(data.isDone);

Ayrıca, koddaki bir observable 'a abone olabilirsiniz.You can also subscribe to an observable in code. Örneğin, TodoItem sınıfı "Isdone" ve "title" özelliklerindeki değişikliklere abone olur:For example, the todoItem class subscribes to changes in the "isDone" and "title" properties:

saveChanges = function () {
    return datacontext.saveChangedTodoItem(self);
};

// Auto-save when these properties change
self.isDone.subscribe(saveChanges);
self.title.subscribe(saveChanges);

Modeli görüntüleView Model

Görünüm modeli Todo. ViewModel. js ' de tanımlanmıştır.The view model is defined in todo.viewmodel.js. Görünüm modeli, uygulamanın HTML sayfası öğelerini etki alanı verilerine bağlandığı merkezi bir noktasıdır.The view model is the central point where the application binds the HTML page elements to the domain data. SPA şablonunda, görünüm modeli bir todoLists observable dizisi içerir.In the SPA template, the view model contains an observable array of todoLists. Görünüm modelinde aşağıdaki kod, bağlamaları uygulamak için altını gizlemeyi söyler:The following code in the view model tells Knockout to apply the bindings:

ko.applyBindings(window.todoApp.todoListViewModel);

HTML ve veri bağlamaHTML and Data Binding

Sayfa için ana HTML, görünümler/Home/Index. cshtml içinde tanımlanmıştır.The main HTML for the page is defined in Views/Home/Index.cshtml. Veri bağlamayı kullandığımızda, HTML yalnızca gerçekten işlenmiş olan şablona yönelik bir şablondur.Because we are using data-binding, the HTML is only a template for what actually gets rendered. Altını gizleme bildirim temelli bağlamaları kullanır.Knockout uses declarative bindings. Öğeye bir "Data-bind" özniteliği ekleyerek sayfa öğelerini verilere bağlarsınız.You bind page elements to data by adding a "data-bind" attribute to the element. Altını gizleme belgelerinden alınan çok basit bir örnek aşağıda verilmiştir:Here is a very simple example, taken from the Knockout documentation:

<p>There are <span data-bind="text: myItems().count"></span> items<p>

Bu örnekte, altını gizleme <span> öğesinin içeriğini myItems.count()değeriyle güncelleştirir.In this example, Knockout updates the contents of the <span> element with the value of myItems.count(). Bu değer değiştiğinde, altını gizleme belgeyi güncelleştirir.Whenever this value changes, Knockout updates the document.

Altını gizleme birçok farklı bağlama türü sağlar.Knockout provides a number of different binding types. SPA şablonunda kullanılan bağlamalardan bazıları şunlardır:Here are some of the bindings used in the SPA template:

  • foreach: bir döngüde yineleme yapmanızı sağlar ve listedeki her öğeye aynı biçimlendirmeyi uygulayabilirsiniz.foreach: Lets you iterate through a loop and apply the same markup to each item in the list. Bu, yapılacaklar listelerini ve yapılacaklar öğelerini işlemek için kullanılır.This is used to render the to-do lists and to-do items. Foreachiçinde bağlamalar, listenin öğelerine uygulanır.Within the foreach, the bindings are applied to the elements of the list.
  • görünür: Görünürlüğü değiştirmek için kullanılır.visible: Used to toggle visibility. Bir koleksiyon boş olduğunda işaretlemeyi gizleyin veya hata iletisini görünür hale getirin.Hide markup when a collection is empty, or make the error message visible.
  • değer: form değerlerini doldurmak için kullanılır.value: Used to populate form values.
  • tıklama: bir tıklama olayını görünüm modelinde bir işleve bağlar.click: Binds a click event to a function on the view model.

Anti-CSRF korumasıAnti-CSRF Protection

Siteler arası Istek forgery (CSRF), kötü niyetli bir sitenin kullanıcının şu anda oturum açtığı bir güvenlik açığı olan siteye istek gönderdiği bir saldırıya neden olur.Cross-Site Request Forgery (CSRF) is an attack where a malicious site sends a request to a vulnerable site where the user is currently logged in. ASP.NET MVC, CSRF saldırılarını önlemeye yardımcı olmak için, istek doğrulama belirteçleri olarak da adlandırılan, güvenlik yumuşatma belirteçlerinikullanır.To help prevent CSRF attacks, ASP.NET MVC uses anti-forgery tokens, also called request verification tokens. Fikir, sunucunun rastgele oluşturulmuş bir belirteci bir Web sayfasına yerleştirmesinden yarar.The idea is that the server puts a randomly generated token into a web page. İstemci sunucuya veri gönderdiğinde, istek iletisinde bu değeri içermesi gerekir.When the client submits data to the server, it must include this value in the request message.

Kötü amaçlı sayfa, aynı kaynak ilkeleri nedeniyle kullanıcının belirteçlerini okuyamadığı için, karşı koruma belirteçleri çalışır.Anti-forgery tokens work because the malicious page cannot read the user's tokens, due to same-origin policies. (Aynı kaynak ilkeleri, iki farklı sitede barındırılan belgelerin birbirlerinin içeriğine erişmesini önler.)(Same-origin policies prevent documents hosted on two different sites from accessing each other's content.)

ASP.NET MVC, antiforgery sınıfı ve [Validateantiforgeryıtoken] özniteliği aracılığıyla, korsanlığa karşı koruma belirteçleri için yerleşik destek sağlar.ASP.NET MVC provides built-in support for anti-forgery tokens, through the AntiForgery class and the [ValidateAntiForgeryToken] attribute. Şu anda bu işlev Web API 'sinde yerleşik değildir.Currently, this functionality is not built into Web API. Ancak, SPA şablonu, Web API 'SI için özel bir uygulama içerir.However, the SPA template includes a custom implementation for Web API. Bu kod, çözümün Filters klasöründe bulunan ValidateHttpAntiForgeryTokenAttribute sınıfında tanımlanır.This code is defined in the ValidateHttpAntiForgeryTokenAttribute class, which is located in the Filters folder of the solution. Web API 'sindeki Anti-CSRF hakkında daha fazla bilgi edinmek için bkz. siteler arası Istek forgery (CSRF) saldırılarını önleme.To learn more about anti-CSRF in Web API, see Preventing Cross-Site Request Forgery (CSRF) Attacks.

SonuçConclusion

SPA şablonu, modern ve etkileşimli Web uygulamalarını hızlı bir şekilde yazmaya başlamanızı sağlayacak şekilde tasarlanmıştır.The SPA template is designed to get you started quickly writing modern, interactive web applications. Veri ve uygulama mantığındaki sunumu (HTML biçimlendirmesi) ayırmak için altını gizleme. js kitaplığını kullanır.It uses the Knockout.js library to separate presentation (HTML markup) from the data and application logic. Ancak altını gizleme, SPA oluşturmak için kullanabileceğiniz tek JavaScript kitaplığı değildir.But Knockout is not the only JavaScript library you can use to create a SPA. Diğer bazı seçenekleri araştırmak istiyorsanız topluluk tarafından oluşturulan Spa şablonlarınagöz atın.If you want to explore some other options, take a look at the community-created SPA templates.