2015-01-16 24 views
13

Sadece başlangıç ​​noktasını keşfettim ve tasarımın ve onun hissini gerçekten çok seviyorum.Birden fazla html dosyasını kullanarak, kullanıcı arabiriminde UI

Gerçi bir sorun var:

http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

İşte

şöyle der: "Bunun yerine ayrı dosyalarda menu.html ve content.html oluşturmak yerine, aynı zamanda aynı sayfada sayfa içeriğini tanımlayabilirsiniz ."

Tüm uygulamamın bir html dosyasında olmasını istemiyorum, bu yüzden her şablonu ayrı bir dosyaya koymaya çalıştım. Bu benim tabbar olduğunu

www 
- index.html 
- products.html 
- services.html 

: Bu benim dosya yapıdır

<ons-tabbar> 
    <ons-tabbar-item active="true" page="products.html"> 
    <div class="tab"> 
     <ons-icon icon="ion-home" class="tab-icon"></ons-icon> 
     <div class="tab-label">Products</div> 
    </div> 
    </ons-tabbar-item> 

    <ons-tabbar-item page="services.html"> 
    <div class="tab"> 
     <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon> 
     <div class="tab-label">Services</div> 
    </div> 
    </ons-tabbar-item> 
</ons-tabbar> 

DÜZENLEME services.html ait içeriği (products.html benzerdir):

<ons-template id="services.html"> 
    <ons-page> 
    <ons-toolbar> 
     <div class="center">Services</div> 
    </ons-toolbar> 

    <ons-list> 
     <ons-list-item>Item1</ons-list-item> 
     <ons-list-item>Item2</ons-list-item> 
     <ons-list-item>Item3</ons-list-item> 
    </ons-list> 
    </ons-page> 
</ons-template> 

END EDIT

Artık, uygulama yüklendiğinde (Firefox, Chrome, iOS öykünücüsü), sekmeyi ve boş içeriği görüntüleyecektir. Konsolda, harici html dosyalarının henüz yüklenmediğini görebilirsiniz. Hizmetler'i tıklatırsam, tarayıcısı services.html dosyasını alır, ancak görüntülenmez. Ürünler'i tıklıyorum, products.html dosyası yüklenir ancak görüntülenmez.

Son olarak: Hizmetler'i ikinci kez tıklatırsam, harici html dosyasının içeriği doğru şekilde görüntüleniyor.

Bu bir hata mı? Bir çözüm var mı? Sayfaları ons.ready() olayında $ templateCache dosyasına yüklemeyi denedim. Başarılı bir şekilde yüklendiler, ancak yine de ikinci tıklamaya kadar görüntülenmiyorlar ...

Böyle harika bir çerçeve, bir projeyi birden çok dosyaya bölmeyi teklif etmezse utanç verici olur.

+0

Bize her iki sayfanın da içeriğini göster –

+0

Düzenleme konusuna bakın :) – HeikoS

+0

Buradaki asıl sorun, bu harici dosyaların başlatılmamış olması. Ve neden yapabildiler? Uygulama henüz var olmadığını bilmiyor ... – HeikoS

cevap

19

<ons-template> etiketini kaldırın. Yalnızca şablonları index.html'da tanımladığınızda gereklidir.

İlgili konular