Reloading partials handlebars

Question

Tôi khá mới để lập trình và đặc biệt là các tay lái. Tôi có một div nạp với sự kết hợp của jquery và tay lái trong tập tin html của tôi. Tôi có các tab trên đầu trang của nó. Tôi muốn tải lại tất cả nội dung sang một nội dung mới khi có nhấp chuột trên tab. Nội dung tương tự (cùng một cấu trúc) nhưng nhãn, hình ảnh và vv phải thay đổi. Tôi đã thử sử dụng một phần trong handlebars.js. Đây là mã mẫu.

<script type="text/x-handlebars-template" id="all-handlebar"> 
    {{#each tabs}} 
     <div id=tab{{@index}}>{{this.text}}</div> 
    {{/each}} 
    <div id="tab-content">{{> tabContentPartial}} 
</script> 
<script type="text/x-handlebars-template" id="tab-content-partial"> 
    <div id="mycontent"> 
     <div id="text">{{mycontent.text}}</div> 
     <div id="text">{{mycontent.image}}</div> 
    </div>  
</script> 
<script type="text/javascript"> 
    source=$("#all-handlebar").html(); 
    var template = Handlebars.compile(source); 
    Handlebars.registerPartial("tabContentPartial", $("#tab-content-partial").html()) 
    var context = { 
     mycontent : { 
      text="something that has to change everytime I click on a different tab", 
      image="idem" 
    }; 
    var html = template(context); 
    $("body").html(html); 
</script> 

Nó tải cũng lần đầu tiên nhưng khi tôi bấm vào tab, tôi yêu cầu anh ta lại registerPartial kịch bản tab-content-một phần và nó không tồn tại nữa vì nó đã thay đổi sang HTML khối đúng trong mã của tôi. Làm thế nào có thể tái sử dụng và tải lại kịch bản một phần của tôi với nội dung mới?

Cảm ơn bạn rất nhiều!

Answer 1

Phần chuyển đổi tab thiếu mã và cách bạn truy xuất dữ liệu, vì vậy tôi chỉ có thể cho bạn biết bạn cần làm gì ở nơi bạn nghe chuyển đổi tab .

Để đạt được điều này bạn chỉ cần cũng để biên dịch #tab-content-partial bạn cho việc này bạn không cần phải thay đổi nhiều:

var source=$("#all-handlebar").html(); 
var contentSrc=$("#tab-content-partial").html(); 
var template = Handlebars.compile(source); 
var contentTemplate = Handlebars.compile(contentSrc); 

//because you already have a compiled version of your content template now you can pass this as partial 
Handlebars.registerPartial("tabContentPartial", contentTemplate); 
var context = { 
    mycontent : { 
     text : "something that has to change everytime I click on a different tab", 
     image : "idem" 
    } 
}; 

var html = template(context); 
$("body").html(html); 

Sau đó, vào thời điểm mà bạn cần phải thay đổi nội dung mà bạn sẽ chỉ cần vượt qua các dữ liệu nội dung cho mẫu nội dung và sau đó thay thế nội dung của #tab-content bằng kết quả mới. Bằng cách này bạn cũng có thể tạo các mẫu nội dung khác nhau.

//replace the content with the result of the template 
$("#tab-content").html(contentTemplate(newContent)); 

Tôi hy vọng đây là những gì bạn đang tìm kiếm, nếu không muốn hỏi.