MVC mvvm a html vagy használ knockout létrehozásakor az oldalon (1. rész 2)

Mi a Knockout?

Ha beszélünk Knockout, nem megyek bele a részletekbe, hanem egyszerűen felsorolják a négy alapelv a keret leírása a hivatalos honlapon:

Deklaratív kötődését (deklaratív kötés);
Automatikusan frissíti a felhasználói felület, ha megváltoztatja az objektum tulajdonságait (ek) (Automatic UI frissítés). Ugyanez az elv működik INotifyPropertyChanged Silverlight és WPF;
Függőség (függőség követés);
Sablonok (Sablonozás).

Mindegyik elvek ilyen vagy olyan módon (és egyes esetekben még egy párszor) mutatták be a nagyközönségnek egy vagy más formában. Van egy csomó a kezelőszervek, keretek és felépítmények a hálózaton, de amikor ott volt egy kiütött (a továbbiakban: „ko” vagy „knock-out”), amely kombinált összes fenti egyben, amely az úgynevezett üvegben, fejlesztés HTML 5 vált igazi öröm.

Probléma például alkalmazásával Knockout

Készen áll a felszállásra

Hozzon létre egy új projektet.

MVC mvvm a html vagy használ knockout létrehozásakor az oldalon (1. rész 2)

Következő frissítenie kell az összes csomagot erre, Frissítési-csomag parancs - egy frissítést a konzol Nuget menedzsere. Az új sablon MVC4 projekt már létezik kiütéssel fájlt. *. Js. És ha úgy dönt, hogy használja MVC3, akkor meg kell építeni egy opcionális csomag nuget-knockout Ennek eredményeként a lista, hogy minél több frissítéseket, és ez annak ellenére, hogy a stúdió jött kevesebb, mint egy hónappal ezelőtt (MSDN előfizetők):

Újabb csomag MvcTools:

Azt azonnal eltávolítjuk _Layout.cshtml fájlt. és úgy tűnt, a telepítés után a csomag _LayoutExtended.cshtml beállítva alapértelmezett indítás. Ez történik _ViewStart.cshtml file:

A projekt nem indul most, szükséges rögzíteni az új sablon „_LogOnPartial” az (új az MVC4 file) „_LoginPartial”. És most, elegendő kicserélni a kódot a az oldal alján:

új (újra, mert az általunk használt MVC4, az MVC3 semmit nem kell változtatni a fő sablon):

Egy kicsit később ebben a listában hozzátesszük szkriptek kiütéssel. Fuss a projekt - Igen! Elkezdtem.

Megjegyzés: A megjelenése a módosított sablon nem olyan forró, de mi a szabadság a kreativitás! Ne hagyja az alapértelmezett sablon. Valójában azonban még mindig volt ideje, hogy remake nuget-csomag MVC4.

Most egy újabb csomag Knockout.Mapping:

És akkor egy másik csomag:

A Scripts mappában fájlok voltak teljesen új, és hozzunk létre egy mappát a Js a szkriptek ír magukat. És most elhalasztani ezt a mappát a „párt”.

Ismét a modell? Igen, mert az MVC

Hozzunk létre egy egyszerű osztály FeedbackViewModel. amely tele lesz a felhasználó küld visszajelzést formában:

AjaxController

Hozzon létre egy új kontroller nevű AjaxController. akkor örökölt a szülő osztály Controller (Pro ApiController WebAPI és beszélni fogunk legközelebb).

Így a módszer, amely ad egy listát az üzenetek:

Képviseletek (View)

Most módosítjuk a főoldalon. Index.cshtml nyitni és eltávolítja a felesleges elhagyni a következő jelölést. Ez a fő formája küldünk üzeneteket (feedback). Így, a jelölés:

Ezután fogunk támaszkodni rá. Most csatlakoztassa a kieséses, és minden, ami szükséges a munkáját a kiadványtervezés, hogy az adott prezentáció (részletek) elég volt ahhoz, hogy csatlakozni csak script ViewModel'om ezt a nézetet. Kiderült, hogy nem annyira egyértelmű, ezért elnézést a szójáték. Ennek során továbbra is világosabb.

Mivel mi használ, akkor használhatja MVC4 Csomagok (ez valami új dolog, és rettenetesen hasznos ki, amit úgy tűnt MVC4). A App_Start mappa BundleConfig.cs fájlt.

Jegyezze fel a 2-es szám _LayoutExtended.cshtml fő sablon van egy szöveg:

Ez azt jelenti, hogy minden scriptek regisztrált ezt a csomagot (az angol Bundle - „csomag”) lesz letölthető az összes oldalt az oldal. Én csak add, hogy ez a csomag egy pár sort:

Én akasztott egy szokás egyszerre, amely az úgynevezett „felhalmozódik”, és kiütötte, és bővítése feltérképezése és validálása bemenet a kiütéssel. Bár nem szükséges egy ilyen projekt (de most már tudom, ezekről kiterjesztések). Most már tudom ellenőrizni, hogy a szkriptek töltik kieséses:

Most kezdjük, sőt, a programozás is.

Inkább osztani funkciókat különböző fájlokat, annál is inkább így MVC4 volt egy ilyen csodálatos dolog, mint a minimalizálás és csomagolás (Csomagok). Létrehoztam egy fájlt site.core.js. amely előkészítette a wrapper dolgozni jQuery.Ajax. Ez a fájl egy része kód:

Azt is létrehozott site.services.feedback.js fájlt. Ez a fájl tartalmazza közvetlenül az adatokkal szolgáltatás, amelyet egy wrapper, hogy hozzáférjen a site.services.ajax AjaxController módszerek:

Ügyeljen arra, hogy a vonalak 17 és 23, a mi azokban van, és okozta a vezérlő módszereket.

És szigorúan véve egy másik site.vm.feedback.js fájlt. amely már ViewModel'om képviselni Index.cshtml:

Ez ViewModel továbbra is csak letölt a témák listája jelentések, akkor módosíthatja azt később. Hívja ezt a hirdetést - "Model 1". Downstream cikkben fogok utalni rá.

Annak érdekében, hogy összeköti ezeket a szkripteket az oldalon Index.cshtml írják be az alábbi kódot a az oldal alján, hogy ne zavarja:

A könyvtárak betöltése (fő minta), csatlakozik szkriptek (oldal Index.cshtml) - Menj a legtöbb jelölést.

Deklaratív kötési (Deklaratív kötődés)

Most a szórakoztató része. Megpróbálom elmagyarázni, hogy mit is deklaratív kötődés (MVVM) egy konkrét példát. Először adjon hozzá kód, amely megjelenik a formájában a nevet (lásd „Model 1” vonalat 15.), valamint a letöltött üzeneteket (lásd „Model 1” a 17. sorban):

Ez az út nezateylevym HTML5 attribútum „adat- ...” meg tudja csinálni. Az előadás címe van kötve HTML-jelölést az 5. sorban száma betöltött - a 7. sorban És ez így néz ki:

Most megjelenik egy lista a témák a sejtben

Hozzáadott lista elem (lásd. A karakterlánc 6) használ a mintát (lásd. Lines 13-15). Most úgy néz ki:

Kiváló! Ez csak kell egy legördülő listából. Könnyen lehet módosítani a tételt, és kötődnek egy új típusa:.

Eltávolítottam