"Tek sayfa" JavaScript web siteleri günümüzde. güçlü yapmak için serin araçlar var Benim görüşüme göre, bu doğru server API (ve fazlası) hareket izin ve istemci HTML nesil falan ele vererek yapılır. Bu sorun "desen" arama motoru desteği eksikliği. İki çözüm düşünebilirsiniz:

1. Kullanıcı web sitesine girdiğinde, sunucu tam olarak istemci gibi sayfa işlemek navigasyon üzerine bırak. Eğer öyleyse 4 ** doğrudan gidersem sunucu eğer pushState ile /my_path gidersem istemci aynı şey yapabilmekti.
2. Sunucu arama motoru botlar için özel bir web sitesi sunalım. Eğer normal bir kullanıcı http://example.com/my_path ziyaret ederse sunucu onu web sitesinin JavaScript ağır bir sürüm vermek gerekir. Ama eğer Google bot ziyaret ederse, sunucu Google indeks istiyorum içeriği ile bazı minimal HTML vermelidir.

İlk çözüm daha fazla here tartışılmaktadır. Bu bir web sitesi yapmaya çalışıyorum ve çok güzel bir deneyim değil. KURU değil ve benim durumumda istemci ve sunucu iki farklı şablon motorları kullanmak zorunda kaldım.

Bazı eski iyi ikinci çözüm " web sitelerinde Flash. gördüm sanırım Bu yaklaşım çok daha ilkini daha çok seviyorum ve sunucuda doğru aracı ile oldukça acısız bir şekilde yapılabilir.

Yani gerçekten benim asıl merak ettiğim şudur:

• Daha iyi bir çözüm olabilir mi?
• İkinci çözüm dezavantajları nelerdir? Eğer bir şekilde Google normal bir kullanıcı olarak Google bot için aynı içeriği sunan olmadığımı öğrenirse, o zaman arama sonuçlarında cezalandırılması ki?

#2 "bir geliştirici olarak, sadece arama motoru tarama sağlar." daha kolay olsa Ve evet, eğer Google dışında hizmet farklı içerik bulursa, cezalandırılmış olabilir (bu konuda uzman değilim, ama olanları duydum).

Her iki SEO ve erişilebilirlik (sadece engelli kişi, ama erişilebilirlik üzerinden mobil cihazlar, dokunmatik ekranlı cihazlar, ve diğer standart olmayan bilgi işlem / internet etkin platformlarında) hem de benzer bir temel felsefe: anlamsal olarak zengin biçimlendirme bu "ulaşılabilir" (yani erişilebilir, görüntülenebilir, okumak, işlenen veya başka bir şekilde kullanılan tüm bu farklı tarayıcılar. Ekran okuyucu, arama motoru paletli veya JavaScript etkinleştirilmiş bir kullanıcı, sorun olmadan/dizin/sitenizin temel işlevleri anlamak için kullanmak gerekir.

pushState benim durumumda bu yükü eklemek değil. Sadece sonradan akla gelen ve "zamanımız olduğunda," web geliştirme ön planda. eskiden ne getiriyor

Ne anlatmak seçenek #1 genellikle en iyi yolu git - ama diğer erişilebilirlik ve SEO sorunları, bunu pushState JavaScript-ağır app gerektirir bir ön planlama veya olacak önemli bir yük. Başlangıç sayfası ve uygulama mimarisi içinde pişmiş olmalı - güçlendirme acı verici ve gerekli olandan daha fazla çoğaltma neden olur.

pushState ile çalışıyorum ve son zamanlarda farklı uygulama birkaç SEO, ve bence iyi bir yaklaşım buldum. Temelde madde ama html / şablonlar çoğaltmak için hesapları #1, izler.

Bilgi çoğu bu iki blog bulunabilir:

http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/

ve

http://lostechies.com/derickbailey/2011/06/22/rendering-a-rails-partial-as-a-jquery-template/

Özetini ben kullanmak ERB ya da HAML şablonları (çalışan Ruby on Rails, Sinatra, vb) için benim sunucu tarafı işlemek ve oluşturmak için istemci tarafında şablonlar Omurga olabilir, yanı sıra benim Yasemin JavaScript özellikleri. Bu sunucu tarafı ve istemci tarafı arasında işaretleme çoğaltma keser.

Oradan Alman gereken birkaç ek adımlar için JavaScript ile HTML bu hale sunucu - gerçek ilerici geliştirme ve anlamsal biçimlendirme var teslim ve geliştirilmesi ile JavaScript.

Örneğin, pushState Resim Galerisi uygulama inşa ediyorum. Eğer sunucudan /images/1 istemek, sunucu üzerindeki tüm resim galerisi oluşturmak ve HTML, CSS ve JavaScript tarayıcılar göndermek daha kolay olacak. Eğer JavaScript etkin varsa, gayet iyi çalışır. Sizi her eylem sunucudan farklı bir URL isteği ve sunucu tarayıcınızın biçimlendirme tüm işlerler. Eğer JavaScript etkin varsa, ancak, JavaScript birkaç değişkenleri sunucu tarafından oluşturulan ile birlikte zaten işlenmiş HTML alıp oradan devralacak.

İşte size bir örnek:

<form id="foo">
  Name: <input id="name"><button id="say">Say My Name!</button>
</form>

Sunucu bu açıklamadan sonra, JavaScript (bu örnekte backbone.js bir görünüm kullanarak) seçin

FooView = Backbone.View.extend({
  events: {
    "change #name": "setName",
    "click #say": "sayName"
  },

  setName: function(e){
    var name = $(e.currentTarget).val();
    this.model.set({name: name});
  },

  sayName: function(e){
    e.preventDefault();
    var name = this.model.get("name");
    alert("Hello "   name);
  },

  render: function(){
    // do some rendering here, for when this is just running JavaScript
  }
});

$(function(){
  var model = new MyModel();
  var view = new FooView({
    model: model,
    el: $("#foo")
  });
});

Bu çok basit bir örnektir, ama karşısındaki puan alır bence.

Sayfa yüklendikten sonra görünümü ben instante, görüntülemek için el gibi sunucu tarafından işlenen bu form, görünüm örneği mevcut içerik sağlıyorum. Bendeğilrender arayarak ya da görünüme sahip ilk görünüm yüklendiğinde benim için el oluşturmak. Bir oluşturma yöntemi görünümü ve sonra kullanılabilir var ve sayfaya tüm JavaScript. Bu eğer lazım olursa daha sonra beni yeniden işleme sağlar.

Tıklatarak "Benim Adım" JavaScript düğmesi etkin bir uyarı kutusu neden olur. JavaScript olmadan, sunucuya geri göndermek ve sunucu bir html öğesi için adını bir yerlere hale sokabilir.

Edit

Bağlı olması gereken bir liste var burada daha karmaşık bir örneği ele alalım (bu aşağıda yorum)

<ul> etiket kullanıcıların bir listesi var. Bu listeyi tarayıcı bir istek yarattı ve sonuç olarak şöyle bir şey olduğunda sunucu tarafından işlenir

<ul id="user-list">
  <li data-id="1">Bob
  <li data-id="2">Mary
  <li data-id="3">Frank
  <li data-id="4">Jane
</ul>

Şimdi bu liste üzerinde döngü ve <li> maddelerin her biri için Omurga görünümü ve bir model takmak gerek. data-id öznitelik kullanımı ile, her etiketi kolayca gelen model bulabilirsiniz. Sonra bu html tutunmasını zeki bir koleksiyon görüntülemek ve öğe bir görünüm gerekir.

UserListView = Backbone.View.extend({
  attach: function(){
    this.el = $("#user-list");
    this.$("li").each(function(index){
      var userEl = $(this);
      var id = userEl.attr("data-id");
      var user = this.collection.get(id);
      new UserView({
        model: user,
        el: userEl
      });
    });
  }
});

UserView = Backbone.View.extend({
  initialize: function(){
    this.model.bind("change:name", this.updateName, this);
  },

  updateName: function(model, val){
    this.el.text(val);
  }
});

var userData = {...};
var userList = new UserCollection(userData);
var userListView = new UserListView({collection: userList});
userListView.attach();

Bu örnekte, UserListView <li> etiketleri döngü ve bir görünüm eklemek olacak her biri için doğru bir model oluşturur. bir olay modeli adına bir değişiklik olduğunda olay ve güncellemeleri öğesi görüntülenen metni değiştirmek için işleyicisi ayarlar.

Bu tür bir işlem için html sunucu işlenmiş ve benim JavaScript devralmak ve çalıştırmak, harika bir yoldur almak şeyler, sarma, SEO, Erişilebilirlik, ve pushState destek.

Bu yardımcı olur umarım.