2012-11-26 35 views
13

Tôi đã hy vọng sử dụng thừa kế trong Meteor, nhưng tôi không thể tìm thấy bất kỳ điều gì về nó trong tài liệu hoặc trên Stack Overflow.Sử dụng thừa kế trong meteor.js

Có thể có mẫu kế thừa các thuộc tính và phương thức từ một mẫu trừu tượng hoặc lớp khác không?

+0

Tôi đã tạo [một gói] (https://atmosphere.meteor.com/package/view) được gọi là 'view' cho thiên thạch. Tôi sử dụng nó để bọc các quan điểm sao băng với một xương sống như lớp xem. Có lẽ bạn sẽ tìm thấy một số ý tưởng để bắt đầu với ở đó. – Andreas

Trả lời

18

Tôi nghĩ câu trả lời ngắn gọn là không, nhưng đây là một câu trả lời dài hơn:

Một điều tôi đã làm để chia sẻ chức năng giữa các mẫu là để xác định một đối tượng của những người giúp đỡ, và sau đó gán nó vào nhiều mẫu, như như vậy:

var helpers = { 
    displayName: function() { 
     return Meteor.user().profile.name; 
    }, 
}; 

Template.header.helpers(helpers); 
Template.content.helpers(helpers); 

var events = { 
    'click #me': function(event, template) { 
     // handle event 
    }, 
    'click #you': function(event, template) { 
     // handle event 
    }, 
}; 

Template.header.events(events); 
Template.content.events(events); 

Nó không thừa kế, chính xác, nhưng nó cho phép bạn chia sẻ chức năng giữa các mẫu.

Nếu bạn muốn tất cả các mẫu để có quyền truy cập vào một helper, bạn có thể định nghĩa một helper toàn cầu như vậy (xem https://github.com/meteor/meteor/wiki/Handlebars):

Handlebars.registerHelper('displayName',function(){return Meteor.user().profile.name;}); 
+0

Điều này khá hữu ích. Cảm ơn. Làm thế nào về việc mở rộng các sự kiện? Có ý tưởng nào không? – Gezim

+0

Tôi đã đến cùng một kết luận không hoàn toàn thỏa mãn .. –

+0

@Pilgrim Tôi cũng đã thêm một số ví dụ cho các sự kiện. – zorlak

2

Tôi đã trả lời câu hỏi này here. Trong khi giải pháp không sử dụng inheritance, nó cho phép bạn chia sẻ các sự kiện và người trợ giúp trên các mẫu một cách dễ dàng.

Tóm lại, tôi xác định một chức năng extendTemplate mà mất trong một mẫu và một đối tượng với những người giúp đỡ và các sự kiện như các đối số:

extendTemplate = (template, mixin) -> 
    helpers = ({name, method} for name, method of mixin when name isnt "events") 
    template[obj.name] = obj.method for obj in helpers 

    if mixin.events? 
    template.events?.call(template, mixin.events) 

    template 

Để biết thêm thông tin chi tiết và một ví dụ thấy other answer tôi.

+0

Câu trả lời hay nhất, trong OOP, bạn nên sử dụng "thành phần thừa kế" và câu trả lời này ưu tiên cho câu hỏi trước. –

1

Gần đây, tôi cần có chức năng tương tự trong ứng dụng của mình vì vậy tôi đã quyết định tạo gói của riêng mình sẽ thực hiện công việc đó ra khỏi hộp. Mặc dù nó vẫn đang hoạt động, bạn có thể cho nó đi.

Về cơ bản, toàn bộ phương pháp là như sau:

// Defines new method /extend 
Template.prototype.copyAs = function (newTemplateName) { 
    var self = this; 

    // Creating new mirror template 
    // Copying old template render method to keep its template 
    var newTemplate = Template.__define__(newTemplateName, self.__render); 
    newTemplate.__initView = self.__initView; 

    // Copying helpers 
    for (var h in self) { 
     if (self.hasOwnProperty(h) && (h.slice(0, 2) !== "__")) { 
      newTemplate[h] = self[h]; 
     } 
    } 

    // Copying events 
    newTemplate.__eventMaps = self.__eventMaps; 

    // Assignment 
    Template[newTemplateName] = newTemplate; 
}; 

Trong mẫu mới của bạn (new_template.js) mà bạn muốn mở rộng một trừu tượng của bạn, viết như sau:

// this copies your abstract template to your new one 
Template.<your_abstract_template_name>.copyAs('<your_new_template_name>'); 

Bây giờ , bạn có thể chỉ cần ghi đè người trợ giúp hoặc sự kiện của bạn (trong trường hợp của tôi là trợ giúp photos) bằng cách thực hiện:

Template.<your_new_template_name>.photos = function() { 
    return []; 
}; 

Ý của bạn sẽ đề cập đến các phương thức trợ giúp ghi đè và các phương thức trừu tượng không được ghi đè.

Lưu ý rằng tệp HTML cho mẫu mới là không cần thiết vì chúng tôi luôn đề cập đến tệp trừu tượng.

Mã nguồn có sẵn trên Github here!

Các vấn đề liên quan