Nền tảng 6 - Giao diện điều khiển Cảnh báo: Cố gắng khởi tạo Magellan (bất kỳ plugin JS) nào trên một phần tử đã có plugin Foundation

Question

Tôi đã cài đặt Foundation 6 bằng cách sử dụng bower. Tôi tiếp tục nhận được nhiều warning trong bảng điều khiển mỗi lần tôi sử dụng bất kỳ Foundation 6 - JavaScript based plugin nào.

cảnh báo chính xác:

Cố gắng để khởi tạo Magellan trên một yếu tố đó đã có một plugin Foundation.

kịch bản của tôi bao gồm như sau:

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/what-input/what-input.js"></script> 
<script src="bower_components/foundation-sites/dist/foundation.js"></script> 
<script src="js/app.js"></script> 
<script type="text/javascript"> 
     $(document).foundation(); 
</script> 

Các cảnh báo được kích hoạt bởi các mã có mặt sau trong foundation.js tại dòng 180:

// For each plugin found, initialize it 
    $elem.each(function() { 
     var $el = $(this), 
      opts = {}; 
     // Don't double-dip on plugins 
     if ($el.data('zfPlugin')) { 
     console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin."); 
     return; 
     } 

Tôi đã thử re-installing từ đầu nhưng nó vẫn không hoạt động. Câu hỏi tương tự tồn tại trong Diễn đàn Zurb Foundation nhưng đến nay vẫn chưa có câu trả lời hay.

Làm cách nào để giải quyết vấn đề này?

Answer 1

Mặc dù tôi đã đề cập câu trả lời từ lâu trong câu hỏi comments, tôi cảm thấy sẽ tốt hơn khi viết nó lên với vài điểm khác.

Trong khi cài đặt Zurb Foundation 6 sử dụng bower (dòng lệnh), nó mang lại cho bạn một ID tốt index.html trang để bắt đầu trong đó có thẻ <script> đó đề cập đến một tập tin external js tọa lạc tại root\js\app.js. Theo mặc định, tệp app.js có mã sau:

$(document).foundation(); //invoke all jQuery based Foundation elements 

Vì vậy, về cơ bản, bạn đã có mọi thứ để bắt đầu.

Nhưng, đây không phải là cách nó hoạt động cho đến khi Foundation 6 và tôi không biết những thay đổi này. Tôi đã không xem xét nội dung của app.js như tôi đã giả định nó là trống. Tôi chỉ đơn giản là đã làm theo cách cũ của cách gọi chúng trong html trang của tôi bằng cách viết đoạn mã sau:

<script type="text/javascript"> 
    $(document).foundation(); 
</script> 

Loại đôi gọi các yếu tố Foundation jQuery dựa nuôi một warning tại trình duyệt console.

Giải pháp là để loại bỏ một trong hai gọi, nhưng thực sự loại bỏ các mã bằng văn bản trong tập tin external js có ý nghĩa hơn đối với những lý do sau:

1. tài liệu tham khảo bên ngoài chi phí một http yêu cầu bổ sung, rất nhẹ tăng thời gian tải trang quý báu. Tại sao không giảm nó, nếu bạn có thể.
2. Gọi các phần tử dựa trên jQuery trong trang web phải được thực hiện càng sớm càng tốt để mọi thành phần đều có hình dạng ban đầu trong thời gian không. Vì vậy, nó có ý nghĩa hơn để đề cập đến lời gọi trong một trang html hơn là yêu cầu một tập tin bên ngoài để gọi.

Vì vậy, loại bỏ mã đề cập trong js bên ngoài nộp, đó là tập tin app.js của bạn. Các cảnh báo sẽ biến mất.