Farklı HTML dosyalarındaki şablonları nasıl birleştiririm?

Question

Knockout'un tek tek şablonları komut dosyası etiketlerinde tutulduğundan, etiketin src özniteliğini ayarlayabileceğimi ve HTML'yi ayrı bir dosyadan yükleyebileceğimi düşündüm. safça basitçe işe yaramadı Aksi takdirde, yani ya ben farklı dosyalara şablonları yüklemek için farklı bir yol var

kullanmak gerekir src etiketi ile çalışmak şablonları bağlanmasını almak için bazı hile var

(Diğer iki olasılık - 3, bu projedeki tüm programcıların, başlangıçta tarayıcı tarafından yüklenecek olan aynı devasa dosyayı değiştirmesi beklenir ve 4, Knockoutjs'yi şu amaç için kullanmayın: Bir oyuncak projesinden daha büyük bir şey - eşdeğer kabul ediyorum.)

Answer 1

Bir tarayıcı, çeşitli 'javascript' türlerinden biri dışında bir türe sahip olan ve sonuçları bir komut dosyası olarak çalıştırmayı deneyecek herhangi bir öğeye src yanıt vermez.

Çeşitli seçenekler olsa:

• kullanımı uzaktan şablonlar indirebiliriz bir şablon motoru (en iyisi burada: https://github.com/ifandelse/Knockout.js-External-Template-Engine).

• Şablon içeren ve bunları yükleyen komut dosyası etiketlerinizi kullanmaya başlayın. Bunun gibi bir şey, içeriği src kullanarak konum olarak çeker. Şablonlarınız hazır değilse, applyBindings'i çağırdığınızda dikkatli olmanız gerekir. Projemdeki http://www.knockmeout.net/2011/03/using-external-jquery-template-files.html

Answer 2

Her şablon kendi html dosyasıdır:

$("script[type='text/html']").each(function(index, el) { $.get($(el).attr("src"), 
    function(response) { 
     $(el).text(response); }); 
}); 

İşte Arka ederken bu a yapmak için baktı başka seçenekler vardır. Bunları tanımlamak için bir adlandırma kuralı (* .ko.html) kullanıyorum. Benim inşa zinciri şöyledir:

Adım 1: Lint ve küçültmek * .ko.html dosyaları Bu sadece (<!-- ko --> olanlar hariç) yorumları kaldırmak ve daha kompakt yük için ekstra boşluk şerit etmektir.

Adım 2: Minimize edilmiş html'yi bir js dosyasına dizgeleyin ve karıştırın. js o yüklenebilir bu şekilde basit bir <script> etiketi yerine bir ajax get + enjekte kullanarak çünkü <script type="text/plain"> sınırlayıcı ile bir html dosyası içine birleştirerek düşünün ama js seçtiniz

var templates={ 
    'name1':'some stringified html', 
    'name2':'some more' 
}; 

şöyle görünür.

Adım 3: js nesnesinden şablon almak için yerel şablon altyapısını düzeltin.

var engine = new ko.nativeTemplateEngine(); 
engine._makeTemplateSource = engine.makeTemplateSource; 

engine.makeTemplateSource = function (template, doc) {   
    if (typeof (template) === 'string' && templates[template]) { 
     return { text: function() { return templates[template]; } }; 
    } 
    return engine._makeTemplateSource(template, doc); 
}; 
ko.setTemplateEngine(engine); 

Benim uygulanması adımları inşa gerçekleştirmek için gruntjs kullanır.(Hırıltı-contrib-htmlmin, hırıltı-contrib-concat) htmlmin için

seçenekleri: Herkes bunun için merak ettiğimi herkes için concat

{ 
    stripBanners: true, 
    banner: "(function(t){", 
    footer: "})(window.templates || (window.templates={}));", 
    process: function (src, file) { 
     return 't[\'' + file.replace(/^.*\//, '').replace('.ko.html', '') + '\']=' + JSON.stringify(src) + ';'; 
    } 
} 

için

{ 
removeComments: true, 
collapseWhitespace: true, 
ignoreCustomComments: [/^\s*ko /, /^\s*\/ko /] 
} 

seçenekleri: Şablon kaynak dosyaları, herhangi bir html editöründe düzenlenebilen standart bağımsız html dosyaları ve bu şekilde kontrol edilen kaynaklardır. Html'yi <script> etiketlerinin içinde düzenlemek eğlencelidir. Bonus olarak, kaynak dosyalar çıkarılacak yorumlar içerebilir. Şablonlar, komut dosyası etiketini ekleyerek herhangi bir sayfada yeniden kullanılabilirler: her sayfaya dizilmesine gerek yoktur. Sonuçta oluşan paket, tarayıcıların kolayca önbelleğe alınabildiği, dinamik olarak oluşturulmuş bir sayfaya gömülen şablonların yapamayacağı statik bir dosyadır. Javascript dosyalarını paketlemek için hemen hemen aynı nedenler.