EmberJS şablonu

Makale
07/13/2023

EmberJS MVC Şablonu Nathan Totten, Thiago Santos ve Xinyang Qiu tarafından yazılmıştır.

EmberJS MVC Şablonunu indirin

EmberJS SPA şablonu, EmberJS kullanarak etkileşimli istemci tarafı web uygulamalarını hızla oluşturmaya başlamanızı sağlamak için tasarlanmıştır.

"Tek sayfalı uygulama" (SPA), tek bir HTML sayfası yükleyen ve ardından sayfayı yeni sayfalar yüklemek yerine dinamik olarak güncelleştiren bir web uygulamasının genel terimidir. İlk sayfa yüklendikten sonra SPA, AJAX istekleri aracılığıyla sunucuyla konuşur.

İstemci ve Sunucu etiketli iki kutuyu gösteren diyagram. AJAX etiketli bir ok İstemciden Sunucuya gider. H T M L etiketli bir ok ve J SON etiketli bir ok Sunucudan İstemciye gider.

AJAX yeni bir şey değildir, ancak bugün büyük bir gelişmiş SPA uygulaması derlemeyi ve sürdürmeyi kolaylaştıran JavaScript çerçeveleri vardır. Ayrıca, HTML 5 ve CSS3 zengin UI oluşturmayı kolaylaştırır.

EmberJS SPA Şablonu, AJAX isteklerinden gelen sayfa güncelleştirmelerini işlemek için Ember JavaScript kitaplığını kullanır. Ember.js, sayfayı en son verilerle eşitlemek için veri bağlamayı kullanır. Bu şekilde, JSON verisinde yol gösteren ve DOM'u güncelleştiren kodlardan herhangi birini yazmanız gerekmez. Bunun yerine, HTML'ye verilerin nasıl sunacağını Ember.js belirten bildirim temelli öznitelikler koyarsınız.

Sunucu tarafında EmberJS şablonu, KnockoutJS SPA şablonuyla neredeyse aynıdır. HTML belgelerini sunmak için ASP.NET MVC kullanır ve istemciden gelen AJAX isteklerini işlemek için Web API'sini ASP.NET. Şablonun bu yönleri hakkında daha fazla bilgi için KnockoutJS şablonu belgelerine bakın. Bu konu, Knockout şablonu ile EmberJS şablonu arasındaki farklara odaklanır.

EmberJS SPA Şablon Projesi Oluşturma

Yukarıdaki İndir düğmesine tıklayarak şablonu indirin ve yükleyin. Visual Studio'yu yeniden başlatmanız gerekebilir.

Şablonlar bölmesinde Yüklü Şablonlar'ı seçin ve Visual C# düğümünü genişletin. Visual C# altında Web'i seçin. Proje şablonları listesinde ASP.NET MVC 4 Web Uygulaması'nı seçin. Projeyi adlandırın ve Tamam'a tıklayın.

Yeni Proje iletişim kutusunu gösteren ekran görüntüsü. A S P nokta NET M V C 4 Web Uygulaması şablonu seçilidir.

Yeni Proje sihirbazında Ember.js SPA Projesi'ni seçin.

Yeni A S P nokta NET M V C 4 Projesi iletişim kutusunu gösteren ekran görüntüsü. Ember dot j s S P A Project şablonu seçilidir.

EmberJS SPA Şablonuna Genel Bakış

EmberJS şablonu, sorunsuz ve etkileşimli bir kullanıcı arabirimi oluşturmak için jQuery, Ember.js Handlebars.js birleşimini kullanır.

Ember.js, istemci tarafı MVC deseni kullanan bir JavaScript kitaplığıdır.

Handlebars şablon oluşturma dilinde yazılmış bir şablon, uygulama kullanıcı arabirimini açıklar. Yayın modunda Handlebars derleyicisi handlebars şablonunu paketlemek ve derlemek için kullanılır.
Model, sunucudan aldığı uygulama verilerini depolar (ToDo listeleri ve ToDo öğeleri).
Denetleyici, uygulama durumunu depolar. Denetleyiciler genellikle model verilerini ilgili şablonlara sunar.
Görünüm, ilkel olayları uygulamadan çevirir ve bunları denetleyiciye geçirir.
Yönlendirici, URL'leri ve şablonları eşitlenmiş halde tutarak uygulama durumunu yönetir.

Buna ek olarak, Ember Data kitaplığı JSON nesnelerini (sunucudan RESTful API aracılığıyla elde edilen) ve istemci modellerini eşitlemek için kullanılabilir.

EmberJS SPA şablonu betikleri sekiz katman halinde düzenler:

webapi_adapter.js, webapi_serializer.js: Ember Veri kitaplığını ASP.NET Web API'siyle çalışacak şekilde genişletir.
Betikler/helpers.js: Yeni Ember Handlebars yardımcılarını tanımlar.
Betikler/app.js: Uygulamayı oluşturur ve bağdaştırıcıyı ve seri hale getiriciyi yapılandırır.
Betikler/uygulama/modeller/*.js: Modelleri tanımlar.
Betikler/uygulama/görünümler/*.js: Görünümleri tanımlar.
Betikler/uygulama/denetleyiciler/*.js: Denetleyicileri tanımlar.
Betikler/uygulama/yollar, Betikler/uygulama/router.js: Yolları tanımlar.
Templates/*.hbs: Handlebars şablonlarını tanımlar.

Şimdi bu betiklerden bazılara daha ayrıntılı bir şekilde göz atalım.

Modeller

Modeller Betikler/uygulama/modeller klasöründe tanımlanır. İki model dosyası vardır: todoItem.js ve todoList.js.

todo.model.js yapılacaklar listeleri için istemci tarafı (tarayıcı) modellerini tanımlar. İki model sınıfı vardır: todoItem ve todoList. Ember'de modeller DS'nin alt sınıflarıdır. Modeli. Modelin öznitelikleri olan özellikleri olabilir:

todoItemId: attr('number'), 
title: attr('string')

Modeller, diğer modellere ilişki tanımlayabilir:

todoList: DS.belongsTo('App.TodoList'),

Modeller, diğer özelliklere bağlanan hesaplanan özelliklere sahip olabilir:

hasError: function () {
    var currentError = this.get("error");
    return !(currentError === '' || currentError === null);
}.property('error'),

Modellerde gözlemlenen bir özellik değiştiğinde çağrılan gözlemci işlevleri olabilir:

saveCheckbox: function () {
    if(this.get("isDirty")){
        if (this.get("todoItemId")) {
            App.store.commit();
        }
    }
}.observes('isDone'),

Görünümler

Görünümler Betikler/uygulama/görünümler klasöründe tanımlanır. Görünüm, uygulama kullanıcı arabiriminden olayları çevirir. Olay işleyicisi denetleyici işlevlerine geri dönebilir veya doğrudan veri bağlamını çağırabilir.

Örneğin, aşağıdaki kod görünümlerden/TodoItemEditView.js. Giriş metin alanı için olay işlemeyi tanımlar.

App.TodoItemEditView = Em.TextField.extend({
    lastValue: '',
    focusIn: function (evt) {
        this.lastValue = this.get('parentView').templateData.view.content.get("title");
    },
    focusOut: function (evt) {
        this.changeContent();
    },

    insertNewline: function (evt) {
        $(evt.target).blur();
    },

    changeContent: function () {
        var todoItem = this.get('parentView').templateData.view.content;
        var newValue = todoItem.get("title");
        if (this.lastValue != newValue) {
            App.store.commit();
            this.lastValue = newValue;
        }
    }
});

Denetleyici

Denetleyiciler Betikler/uygulama/denetleyiciler klasöründe tanımlanır. Tek bir modeli temsil etmek için genişletin Ember.ObjectController:

App.TodoItemController = Ember.ObjectController.extend({
});

Denetleyici, genişleterek Ember.ArrayControllerbir model koleksiyonunu da temsil edebilir. Örneğin, TodoListController bir nesne dizisini todoList temsil eder. Denetleyici todoList kimliğine göre azalan düzende sıralar:

App.TodoListController = Ember.ArrayController.extend({
    error: "",
    sortProperties: ['todoListId'],
    sortAscending: true,

    // ...

Denetleyici, yeni bir todoList oluşturan ve diziye ekleyen adlı addTodoListbir işlev tanımlar. Bu işlevin nasıl çağrıldığını görmek için Şablonlar klasöründeki todoListTemplate.html adlı şablon dosyasını açın. Aşağıdaki şablon kodu işleve addTodoList bir düğme bağlar:

<input type="button" {{action "addTodoList"}} class="isActive" value="Add Todo list"></input>

Denetleyici ayrıca bir hata iletisi tutan bir error özellik içerir. Hata iletisini görüntülemek için şablon kodu aşağıdadır (todoListTemplate.html de):

<p class="error">{{error}}</p>

Yollar

Router.js görüntülenecek yolları ve varsayılan şablonu tanımlar, uygulama durumunu ayarlar ve URL'leri yollarla eşleştirir:

App.Router.map(function () {
    this.route("index", { path: "/" });
    this.route("about");
    this.route("todoList", { path: "/todo" });
});

TodoListRoute.js setupController işlevini geçersiz kılarak TodoListRoute için verileri yükler:

App.TodoListRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        controller.set('content', App.TodoList.find());
    }
});

Ember, URL'leri, yol adlarını, denetleyicileri ve şablonları eşleştirmek için adlandırma kurallarını kullanır. Daha fazla bilgi için EmberJS belgelerine bakın http://emberjs.com/guides/routing/defining-your-routes/ .

Şablonlar

Templates klasörü dört şablon içerir:

application.hbs: Uygulama başlatıldığında işlenen varsayılan şablondur.
about.hbs: "/about" yolunun şablonu.
index.hbs: Kök "/" yolunun şablonu.
todoList.hbs: "/todo" yolunun şablonu.
_navbar.hbs: Şablon gezinti menüsünü tanımlar.

Uygulama şablonu bir ana sayfa gibi davranır. Yola bağlı olarak diğer şablonları eklemek için bir üst bilgi, alt bilgi ve "{{outlet}}" içerir. Ember'deki uygulama şablonları hakkında daha fazla bilgi için bkz http://guides.emberjs.com/v1.10.0/templates/the-application-template//. .

"/todoList" şablonu iki döngü ifadesi içerir. Dış döngü , {{#each controller}}iç döngü ise şeklindedir {{#each todos}}. Aşağıdaki kodda Ember.Checkbox yerleşik bir görünüm, özelleştirilmiş App.TodoItemEditViewbir ve eylem içeren bir bağlantı gösterilmektedir deleteTodo .

{{view Ember.Checkbox checkedBinding="isDone"}}

{{view App.TodoItemEditView valueBinding="title" class="required" disabledBinding="isDone"}}

<a href="#" {{action "deleteTodo" on="click" target="view"}}>X</a>

HtmlHelperExtensions Controllers/HtmlHelperExtensions.cs içinde tanımlanan sınıfı, Web.config dosyasında hata ayıklamatrue olarak ayarlandığında şablon dosyalarını önbelleğe almak ve eklemek için bir yardımcı işlev tanımlar. Bu işlev Views/Home/App.cshtml içinde tanımlanan ASP.NET MVC görünüm dosyasından çağrılır:

@if (HttpContext.Current.IsDebuggingEnabled)
{
    @Html.RenderEmber()
}
else
{
    @Scripts.Render("~/bundles/templates")
}

Bağımsız değişken olmadan çağrılan işlev, Şablonlar klasöründeki tüm şablon dosyalarını işler. Ayrıca bir alt klasör veya belirli bir şablon dosyası da belirtebilirsiniz.

Web.config içinde hata ayıklamayanlış olduğunda, uygulama "~/bundles/templates" paket öğesini içerir. Bu paket öğesi, Handlebars derleyici kitaplığı kullanılarak BundleConfig.cs dosyasına eklenir:

if (!HttpContext.Current.IsDebuggingEnabled)
{
    bundles.Add(new Bundle("~/bundles/templates", 
        new EmberHandlebarsBundleTransform()).Include(
            "~/scripts/app/templates/*.hbs"
        ));
}

Aracılığıyla paylaş