Ember.js - mẫu mặc định để hiển thị trong ổ cắm?

Question

Vì vậy, tôi có một trang trông giống như sau

[ Nav Bar ] 

|   | 
| Content | 
|   | 

Thanh nav Tôi muốn trở thành thường xuyên trên tất cả các trang. Vì vậy, cách tiếp cận tôi đã sử dụng là đặt trang của tôi như sau:

[ Nav Bar ] 

{{outlet}} 

Điều này thật tuyệt, giờ đây tôi có thể hiển thị các trang khác nhau cho lối ra của tôi cho các tuyến khác nhau.

Nhưng nếu tôi muốn mẫu mặc định được hiển thị vào ổ cắm cho trang chủ của tôi thì sao?

Tôi đã đạt được điều này bằng cách chuyển hướng / đến /home, nhưng phải có cách tốt hơn để làm điều này cho phép tôi hiển thị trang chủ mặc định tại / mà không định tuyến lại?

Bất cứ lời khuyên đánh giá cao,

Cảm ơn, Daniel

Answer 1

Để render thứ trong {{ổ cắm}} tại trang gốc /, bạn phải xác định một kịch bản handlerbar cho chỉ số:

đang navbar của bạn có thể trông như thế này:

<script type="text/x-handlebars"> 
    <div class="navbar ..."> 
    ... 
    </div> 

    {{outlet}} 
</script> 

Các trang gốc mà sẽ diễn ra bên trong {{}} ổ cắm là fallowing:

<script type="text/x-handlebars" id="index"> 
    <div class="container"> 
     <h1>Root page!!</h1> 
    </div> 
</script> 

Nói cách khác, bạn phải tạo một kịch bản handlebar rằng sẽ có một id = "index".

Nên hoạt động. Nó không cần bất kỳ mã js để làm việc.

Answer 2

Tôi phải thừa nhận tài sản này không phải là tài liệu tốt và chôn cất trong các tài liệu cho Ember.View nhưng bạn có thể thử thiết lập defaultTemplate tài sản trên ApplicationView của bạn. Xem here để biết thêm thông tin về điều đó (tìm kiếm trong trang 'defaultTemplate').

Hy vọng điều đó sẽ hữu ích.

Answer 3

Tuyên bố sau đây trong tài liệu giúp tôi để giải quyết chính xác cùng một vấn đề tôi đã có được nêu trong câu hỏi: Ember routing docs

Mẫu index sẽ được trả lại vào {{ổ cắm}} trong mẫu ứng dụng. Nếu người dùng điều hướng đến/favorites, Ember sẽ thay thế mẫu chỉ mục bằng mẫu yêu thích.

Vì tôi đang sử dụng cấu trúc nhóm trong dự án của mình, tôi đã tạo một tuyến đường chỉ mục có mẫu mặc định và tôi đã đặt thành phần thanh điều hướng trong tệp ứng dụng/template.hbs của mình.

app/application/template.hbs:

<div id="pageWrapper"> 
    <div id="navbarfixed">{{nav-bar options=options}}</div> 
    <div id="pageContent"> 
     {{outlet}} 
    </div> 
</div> 

app/index/mẫu.hbs

<div id="homeWrapper"> <!--This gets rendered by default in outlet above--> 
Some default content of outlet 
</div>