Một phương thức hiển thị các mẫu khác nhau khi nhấp vào một phần tử

Question

Tôi có các nút khác nhau (một để tạo 'chạy nước rút', một mẫu khác để tạo nhận xét, v.v.). Các biểu mẫu để thực hiện các tác vụ này được nối vào hộp thoại phương thức được hiển thị khi bạn nhấp vào các nút khác nhau.

Đây là những dòng:

nhấp chuột vào nút "Sprint"> thêm "Sprint" form> hiển thị các phương thức

sau đó nếu bạn nhấp vào nút khác:

nhấp chuột trên Nút "Nhận xét"> nội dung phương thức trống> nối thêm biểu mẫu "Nhận xét"> hiển thị phương thức

Hiện tại, nội dung khác được lưu trong chuỗi và i s được thêm vào phương thức khi bạn nhấp vào nút.

Nhưng bây giờ tôi đang sử dụng mẫu Backbone và Underscore, và tôi không thể tìm ra cách để làm điều tương tự. Tôi không muốn có tất cả các mẫu bên trong phương thức và hiển thị chúng tùy thuộc vào nút bạn đã nhấp; Tôi muốn thêm một mẫu đã được lưu vào bộ nhớ cache khi nhấp chuột.

Có cách nào để thực hiện việc này với Backbone và Underscore không?

Answer 1

Shvetusya có ý tưởng chung, nhưng đây là một ví dụ cụ thể mà hy vọng sẽ được rõ ràng hơn:

var Modal = Backbone.View.extend({ 
    render: function() { 
     this.$el.append(this.options.form.render().$el); 
    } 
}); 

var SprintForm = Backbone.View.extend({ 
    render: function() { 
     // Use your templating engine to make a "sprint" form 
     // eg. this.$el.html(sprintTemplate()); 
    } 
}); 

var CommentForm = Backbone.View.extend({ 
    render: function() { 
     // Use your templating engine to make a "comment" form 
     // eg. this.$el.html(commentTemplate()); 
    } 
}); 

// handler for: click on "Sprint" button > 
handleSprintButtonClick: function() { 
    var sprintForm = new SprintForm(); 
    var modal = new Modal({form: sprintForm}); 
    $(document.body).append(modal.render().$el); 
} 

// handler for: click on "Comment" button > 
handleCommentButtonClick: function() { 
    var commentForm = new CommentForm(); 
    var modal = new Modal({form: commentForm}); 
    $(document.body).append(modal.render().$el); 
} 

Answer 2

Tôi đã giải quyết được sự cố tương tự bằng cách tách vùng chứa cho phương thức thành chế độ xem riêng.

Sau đó, khi nút "chạy nước rút" được nhấp, hãy hiển thị chế độ xem biểu mẫu "chạy nước rút" và thêm el của chế độ xem đó vào chế độ rồi mở phương thức.

Tương tự, khi nút "nhận xét" được nhấp, hãy hiển thị chế độ xem biểu mẫu "nhận xét" và thêm el của nó vào phương thức.

Bằng cách đó bạn có thể sử dụng mẫu cho biểu mẫu "chạy nước rút" và biểu mẫu "nhận xét".

Thanh toán bài này ở đây cũng (Tôi sử dụng nó cho các thiết lập hiện tại của tôi):

Managing A Modal Dialog With Backbone And Marionette