SORU
22 Mart 2012, PERŞEMBE


Backbone.js model verileri kaydetmek için yollar?

Ön uç geliştirme içine daha fazla ve ben son zamanlarda benim app içine backbone.js keşfetmek başladı. Sunucuya model veri devam etmek istiyorum.

Açıklamama Model verileri (json formatında) kaydetmek için çeşitli yolu misiniz. Sunucu tarafında Java kullanıyorum. Ayrıca, özellikle deney verileri kaydetmek için kullanılan gördüm. Ön uç içine daha fazla dev olduğum gibi, DİNLENME ve benzeri şeyler olduğunun farkında değilim.

Eğer biri bana basit bir örnek ile bu süreci anlatabilir misiniz eğer iyi olurdu.

CEVAP
25 Mart 2012, Pazar


Temel olarak Modeller, belirli bir model olabilir çeşitli değerleri olan bir özellik olarak adlandırılan özellikleri var. Omurga bu değerler JSON nesneleri almak ve çeşitli yöntemlerle doldurmak için basit bir yol olarak JSON nesneleri kullanır. Örnek:

Donuts = Backbone.Model.extend({
    defaults: {
        flavor: 'Boston Cream',  // Some string
        price: '0.50'  // Dollars
    }
});

Modeli orada doldurmak için bunu yapmak için birkaç yolu vardır. Örneğin, JSON VEYA kullanım bir yöntem kümesi denir geçirerek modeli örneği ayarlayabilirsiniz() öznitelikleri JSON bir nesne alır.

myDonut = new Donut({'flavor':'lemon', 'price':'0.75'});
mySecondHelping = new Donut();
mySecondHelping.set({'flavor':'plain', 'price':'0.25'});

console.log(myDonut.toJSON());
// {'flavor':'lemon', 'price':'0.75'}
console.log(mySecondHelping.toJSON());
// {'flavor':'plain', 'price':'0.25'}

Bu bizi modelleri ve tasarrufu ya da bir sunucu için onlara ısrar getirir. Ayrıntılar "Huzurlu/DİNLENME Nedir?" İle İlgili bir sürü var Ve biraz kısa bir tanıtım burada bunu açıklamak zordur. DİNLENME ve Omurga tasarrufu konusunda özellikle, kafanı karıştıran şey veri ile ne yaptığınızı HTTP istekleri semantiği ve.

Muhtemelen HTTP istekleri iki tür için kullanılır. GET ve POST. Huzurlu bir ortamda, bu fiilleri, bu Omurga varsayar özel kullanımlar için özel bir anlamı vardır. Sunucu (geçen zaman, bir blog girişi kurtardım örneğin donut model, bilgisayar belirtimi) belirli bir kaynağı almak istiyorum ve bu kaynak varsa, bir istek alabilirim. Yeni bir kaynak oluşturmak istediğinizde tersine, POST kullanın.

Omurgası haline gelmeden önce, hiç bir HTTP isteği aşağıdaki iki yöntemden dokunmadım. KOYUN ve SİLİN. Bu iki fiil de Omurga için özel bir anlamı var. Kaynak güncellemek istediğiniz zaman (örneğin limon tadı limon donut, donut vb.) KOY isteği kullanın. Sunucudan bu modeli hep birlikte silmek istediğinizde, SİLMEK isteği kullanın.

Bu temel Dinlendirici bir uygulama ile, muhtemelen kullandığınız fiil istek Türüne göre uygun görev yapacak URI bir atama olacak çünkü çok önemli. Örneğin:

// The URI pattern
http://localhost:8888/donut/:id

// My URI call
http://localhost:8888/donut/17

Eğer URİ ALMAK yaparsam, 17 kimlikle çörek modeli almak istiyorum. :Id sunucu tarafı tasarrufu bağlıdır. Bu sadece veritabanı tablonuzdaki çörek kaynağın KİMLİĞİ olabilir.

Eğer yeni veri ile bu URI için bir KOYUN yaparsam, güncelleme, kurtarmış olurdum. Ve eğer bu URI için silersem, o zaman benim sistemi temizlemek olacaktır.

Henüz bir kaynak oluşturmuştur değiştirmediğin YAZI ile, kurulan kaynak KİMLİĞİ olmaz. Belki de kaynak yaratmak istiyorum URI hedef: bu sadece

http://localhost:8888/donut

URI hiçbir KİMLİK parçası. Bu URİ tasarımları tüm kaynakları düşündüğün kadar. Ama Rahat tasarımı ile ilgili olarak, benim anlayış HTTP isteği ve URI kolay okunur ve insan dostu olan isimler olarak kaynaklara eylemleri fiilleri tutmak istiyorum.

Hala benimle misin? :-)

Hadi geri Omurga düşünmeye başla. Omurga sizin için bir sürü iş yapıyor, çünkü harika. Bizim yaparım ve secondHelping, biz sadece bunu yapmak için:

myDonut.save();
mySecondHelping.save();

Omurga akıllı. Eğer sadece çörek bir kaynak yaratılmış, sunucu KİMLİĞİ olmaz. Bir Omurga DAHİLİ olarak kullandığı ama yeni bir kaynak oluşturmak gerektiğini biliyor ve bir POST isteği gönderir ve nüfus cüzdanı olmadığı bir cİD çağırdı. Eğer sunucudan modeliniz varsa, muhtemelen bir sakıncası olsaydı bir KİMLİĞİ var. Kaydetmek, bu durumda, () Omurga server update etmek istiyorum ve bir KOYUN gönderir varsayar. Belirli bir kaynak elde etmek için, Omurga yöntemi kullanmak istiyorum .() getir ve bir GET isteği gönderir. Çağırdığınızda .() yok SİL gönderecek bir model.

Önceki örneklerde, hiç URİ olduğu açıkça Omurga söyledi. Sıradaki örnekte bunu.

thirdHelping = Backbone.Model.extend({
    url: 'donut'
});
thirdHelping.set({id:15});  // Set the id attribute of model to 15
thirdHelping.fetch();  // Backbone assumes this model exists on server as ID 15

Omurga sadece /donut katacak http://localhost:8888/donut/15 de thirdHelping sitenizin kök kök alacak.

Eğer HALA benimle iseniz iyi. Sanırım. Kafan karışık değilse. Ama zaten yalpalamaya ederiz. Bu ikinci bölümü SUNUCU tarafı. HTTP farklı fiiller ve bu fiiller arkasında semantik anlamları hakkında konuştuk. Sen, Omurga, VE sunucu pay gerektiğini anlamları.

Sunucu GET, POST, PUT ve DELETE isteği arasındaki farkı anlamak gerekir. Gördüğünüz gibi örneklerde yukarıda, GET, PUT ve DELETE diye her noktanın aynı URI http://localhost:8888/donut/07 Sürece sunucunuz olabilir arasında ayrım bu HTTP istekleri olacak çok karışık olarak ne yapmak kaynak.

Bu Dinlendirici bir server sonuna kodunuzu düşünmeye başlarsınız. Bazı insanlar Ruby, bazı insanlar gibi .net, PHP severim. Özellikle mikro-İNCE çerçeve PHP severim. SLİM PHP Dinlendirici faaliyetleri ile başa çıkmak için çok şık ve basit bir araç kümesi olan mikro-çerçeve. Ve arama GET, POST, PUT veya DELETE olmasına bağlı olarak yukarıdaki örneklerde doğru kod çalıştırır gibi yollar tanımlayabilirsiniz (URI). Başka çözümler Ara, Tonik gibi İNCE benzer. Pasta ve Codeıgniter gibi büyük çerçeveler de en az sevsem de benzer şeyler düşünüyorum. İnce seviyorum mu dedim? ;-)

Bu sunucuda alıntı kod (yani özellikle yolları ile ilgili.) görünebilir nedir

$app->get('/donut/:id', function($id) use ($app) {
    // get donut model with id of $id from database.
    $donut = ...

    // Looks something like this maybe:
    // $donut = array('id'=>7, 'flavor'=>'chocolate', 'price'=>'1.00')

    $response = $app->response();
    $response['Content-Type'] = 'application/json';
    $response->body(json_encode($donut));
});

Burada önemli Omurga JSON bir nesne beklediğini unutmayın. Her zaman senin server 'application/json eğer yapabilirsen.' ve json formatında kodlamak olarak içerik tipi belirlemek zorunda Sonra Omurga JSON nesne aldığında, istenen model doldurmak için nasıl bilir.

SLİM PHP ile yolları oldukça benzer şekilde yukarıda çalışır.

$app->post('/donut', function() use ($app) {
    // Code to create new donut
    // Returns a full donut resource with ID
});
$app->put('/donut/:id', function($id) use ($app) {
    // Code to update donut with id, $id
    $response = $app->response();
    $response->status(200);  // OK!
    // But you can send back other status like 400 which can trigger an error callback.
});
$app->delete('/donut/:id', function($id) use ($app) {
    // Code to delete donut with id, $id
    // Bye bye resource
});

Neredeyse tam tur yaptık! Bir soda getir. Diyet Mountain Dew seviyorum. Bir tane de bana getir.

Bir kez sunucu işlemleri bir istek, bir şey ile veritabanı ve kaynak, hazırlar bir yanıt (olsun olsun basit bir http durum numarası veya tam JSON kaynak), daha sonra verileri geri geliyor için Omurga için son işlem.

() Kaydet, getir(), vb. yöntemleri - başarı ve hata üzerine isteğe bağlı geri ekleyebilirsiniz. Burada bu özel pasta hazırladım bir örnek:

Cake = Backbone.Model.extend({
    defaults: {
        type: 'plain',
        nuts: false
    },
    url: 'cake'
});

myCake = new Cake();
myCake.toJSON()  // Shows us that it is a plain cake without nuts

myCake.save({type:'coconut', nuts:true}, {
    wait:true,
    success:function(model, response) {
        console.log('Successfully saved!');
    },
    error: function(model, error) {
        console.log(model.toJSON());
        console.log('error.responseText');
    }
});

// ASSUME my server is set up to respond with a status(403)
// ASSUME my server responds with string payload saying 'we don't like nuts'

Birkaç farklı bir şey hakkında bu örnek var. Pastam için bu set yerine görürsünüz() kaydetmeden önce öznitelikleri ıng, ben sadece Kaydet telefonumu yeni nitelikleri içinde geçti. Omurga her yerde JSON veri almak ve bir şampiyon gibi işleme en güzel ninja. Hindistan cevizi ve fındık ile kek kurtarmak istiyorum. (2 salak mı?) Her neyse, benim için iki nesne kaydetmek geçtim. Öznitelikleri nesne VE bazı seçenekler JSON. İlk, {bekle:true} sunucu tarafı gezi başarılı olana kadar istemci tarafı benim model güncelleme yok demektir. Başarı geri arama sunucusu başarıyla bir yanıt verdiğinde ortaya çıkar. Bu örnek bir hata (bir durum 200'den diğer Omurga hata geri arama kullanmak için gösterir) sonuçları bu yana, ancak, değişiklik yapmadan modeli gösterimi. Hala düz ve fındık olmadan olmalıdır. Biz de sunucu geri gönderilen hata nesnesi için erişim var. Bir dize geri gönderdik ama JSON hata daha fazla özellik ile nesne olabilir. Bu hata yer almaktadır.responseText bağlıyor. Evet, 'deli gibi değiliz.'

Tebrikler. Bir model kurmak oldukça dolu ilk tur, gezi, sunucu tarafı ve geri tasarruf yaptık. Bu cevap destansı bunu birlikte nasıl bir FİKİR verir umarım. Tabii ki var, ama Omurga temel fikirler, fiiller Kaydet Huzurlu geçmiş, Sunucu tarafında geziniyordum bu ayrıntılar bir sürü eylemler, Yanıtı burada. Bu sefer başınızın etrafında sarmak için gereken Omurga belgelere geçiyor okunması kolay başka dokümanlar göre süper olan) devam et ama unutma. Sürekli daha akıcı olacak. Bir Omurga ile her gün yeni öğreniyorum ve atılımlar yapmaya başlayın ve bu çerçeve içinde akıcılık büyüyen gördüğünüz gibi çok eğlenceli oluyor. :-)

Mutlu kodlama!

EDİT: yararlı olabilecek Kaynaklar:

YANİ diğer Benzer Yanıtlar: How to generate model IDs with Backbone

Diğerleri için: http://rest.elkstein.org/ http://www.infoq.com/articles/rest-introduction http://www.recessframework.org/page/towards-restful-php-5-basic-tips

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • DigitalRev TV

    DigitalRev T

    30 AĞUSTOS 2007
  • krotoflik

    krotoflik

    26 ŞUBAT 2011
  • xXGAMERrs_Xx

    xXGAMERrs_Xx

    31 Temmuz 2014