Cần trợ giúp về khuôn mẫu gạch dưới - bộ sưu tập templating

Question

Tôi đang sử dụng underscore.js để tạo khuôn mẫu. Đây là một mẫu mẫu.

<script id="discussion-template" type="text/html"> 
    [[ _.each(discussions, function(topic){ ]] 
     <li> 
      <article id="{{ topic.htmlId() }}"> 
       <a class="section-arrow mir" href="#">toggle</a> 
       <h3>{{ topic.get('text') }}</h3> 
       <ol></ol> 
      </article>   
     </li> 
    [[ }); ]] 
</script> 

Bên trong khung nhìn backbone.js.render() Tôi chuyển tập hợp vào mẫu.

this.el.append(this.template({ discussions: this.collection.models })); 

Câu hỏi của tôi ở đây là, tôi có phải viết mã lặp không? Tôi có thể không chỉ vượt qua trong một bộ sưu tập và gạch dưới đủ thông minh để hiển thị một mục cho mỗi mục trong bộ sưu tập? Ngoài ra, underscore.js còn cung cấp thứ gì đó cho các mẫu lồng nhau không? Mỗi mục trong bộ sưu tập thực sự có một bộ sưu tập các mục tôi sẽ cần phải render là tốt. Làm thế nào tôi có thể gọi một mẫu khác từ bên trong mẫu này. Bất kỳ liên kết, mẹo và hướng dẫn nào cũng được đánh giá cao.

Cảm ơn!

Answer 1

Tôi nghĩ bạn phải viết mã vòng lặp, nhưng bạn có thể xóa nó bằng cách có vòng lặp trong chế độ xem thay vì mẫu. Vì vậy, bạn sẽ có một mẫu cho vùng chứa (giữ <ol>) và một mẫu khác để hiển thị <li> s.

Đối với mỗi mục là một tập hợp các mục bạn có thể sử dụng cùng một kỹ thuật, với các mô hình đó gắn thêm <ol class="topic-collection-will-append-to-this"> trong mẫu mục chủ đề.

tôi đã không kiểm tra mã dưới đây vì vậy tôi không chắc chắn 100% nó không phải là lỗi miễn phí, nhưng nó sẽ cho bạn ý tưởng về một cách để giải quyết nó :)

window.TopicView = Backbone.View.extend({ 
    template: _.template($("#topic-template").html()), 
    tag: 'li', 
    className: 'topic', 

    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 

    render: function() { 
     $(this.el).html(this.template({topic: this.model})); 
     return this; 
    } 
}); 

window.DiscussionView = Backbone.View.extend({ 
    tagName: 'section', 
    className: 'discussion', 
    template: _.template($('#discussion-template').html()), 

    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.collection.bind('reset', this.render); 
    }, 

    render: function() { 
     var $topics, 
     collection = this.collection; 

     $(this.el).html(this.template({})); 
     $topics = this.$(".topics"); 
     this.collection.each(function(topic) { 
      var view = new TopicView({ 
       model: topic 
      }); 
      $topics.append(view.render().el); 
     }); 

     return this; 
    } 
}); 

<script id="topic-template" type="text/html"> 
    <article id="{{ topic.htmlId() }}"> 
     <a class="section-arrow mir" href="#">toggle</a> 
     <h3>{{ topic.get('text') }}</h3> 
     <ol class="topic-collection-will-append-to-this"> 
     </ol> 
    </article>   
</script> 

<script type="text/template" id="discussion-template"> 
    ... 
    <ol class="topics"> 
    </ol> 
</script> 

Answer 2

Bạn có thể có hai mẫu , một cho danh sách và một cho các yếu tố bên trong. Và trong danh sách các mẫu chỉ cần in kết quả của các bên trong một: http://jsfiddle.net/dira/hRe77/8/

mẫu gạch của rất rất đơn giản và không có bất kỳ hành vi thông minh/ma thuật kèm theo: http://documentcloud.github.com/underscore/docs/underscore.html#section-120

Answer 3

gì bạn đang tìm kiếm là một hệ thống templating có thẩm quyền hơn. Tính năng tạo khuôn mẫu của gạch dưới là rất nhỏ, không có hỗ trợ sẵn cho looping và như vậy. Maybee Mustache mẫu dành cho bạn? (Sidenote: nó được gọi là logic-ít hơn cho một số lý do lạ. Với cả đệ quy và hỗ trợ lambda tôi muốn nói rằng bạn đang ít nhất một nửa cách để Đề án, nhưng tôi digress ..)