PanoJS thất bại do phương pháp được không thiếu

Question

Tôi đang sử dụng PanoJS trong một dự án Rails 4 mất tích và tôi nhận được lỗi sau:

TypeError: this.getLevel(...) is undefined 
[panojs/pyramid_imgcnv.js][1] Line 92 

Những gì tôi là nhầm lẫn về là phương pháp dường như được tuyên bố chỉ là một vài dòng ở trên.

Tôi đã nêu vấn đề này với PanoJS nhưng tôi nghi ngờ đó chỉ là lỗi cấu hình giữa Rails và Javascript. Trước đây tôi đã thiết lập và làm việc với dự án Rails 3. Tôi đã sử dụng các tệp JS giống nhau và tải chúng theo cùng một thứ tự. Tôi không thể nhìn thấy những gì khác nhau (khác với phiên bản Rails) nhưng một phiên bản hoạt động và một phiên bản không.

Cập nhật:

Yếu tố được khai báo là (tôi đã rời khỏi phần dữ liệu ra cho ngắn gọn);

%div{ id: "image_viewer", class: "viewer", data: {} } 

JS nên được kích hoạt với bản sau, nhưng tại thời điểm này tôi đã nhận xét vì nó chỉ thêm lỗi vì addimagezoom sẽ không hoạt động.

jQuery(document).ready ($) -> 

    $('#zoomimage').addimagezoom 
    largeimage: $('#zoomimage').data('large-image-url'), 
    magnifiersize: [$('#zoomimage').data('scaled-x-dimension'),$('#zoomimage').data('scaled-y-dimension')], 
    zoomrange: [2, 10] 

Cập nhật 2:

Tôi đã nhận ra rằng tôi đã phạm sai lầm trong bài viết ban đầu của tôi. Kích hoạt thực sự là như dưới đây. Ở trên là một vật phẩm từ những nỗ lực của tôi để có được một người xem khác nhau làm việc. Kích hoạt thực sự bên dưới.

createViewer viewer, 'image_viewer', "#{url_base}/#{image_id}", "#{image_uuid}_", width, height, target_format 

Answer 1

Ok, điều này thực sự là khó mà không thể nhìn thấy tất cả các mã chạy. Nhưng như một Sherlock wannabe tôi có thể thấy điều này:

Lỗi nói rằng kết quả của this.getLevel(...) không được xác định tại dòng 92 của tệp panojs/pyramid_imgcnv.js. Các tập tin nguồn khẳng định:

ImgcnvPyramid.prototype.tile_filename = function(level, x_coordinate, y_coordinate) { 
    var l = formatInt(this.getLevel(level).level , 3); 
    ... 
} 

Có nghĩa là giá trị của level tạo ra một kết quả của undefined trong getLevel(). Kiểm tra ra getLevel() chúng ta có thể thấy rằng:

ImgcnvPyramid.prototype.getLevel = function(level) { 
    if (level<this._pyramid.length) 
     return this._pyramid[ level ];  
    else 
     return this._pyramid[ this._pyramid.length-1 ];   
} 

Do đó level là:
A. không xác định, hoặc
B. một số âm trỏ đến một vị trí mảng unexisting, hoặc
C.giá trị được lưu trữ trong vị trí đó trong mảng _pyramid là không xác định

Nếu chúng ta tìm kiếm bất kỳ trường hợp nào hàm ImgcnvPyramid.tile_filename được gọi, chúng ta có thể thấy nó không được gọi bất kỳ nơi nào khác bên trong mã nguồn. Điều này có nghĩa là người dùng thực hiện thư viện phải gọi nó. Vì vậy, hãy kiểm tra, (và giả sử) bạn đang thực hiện các plugin giống như cách trang demo đang làm.

Bản demo ghi đè phương thức tileUrlProvider.assembleUrl. Chức năng này nên được thực hiện khi bạn muốn ghi đè lên url của từng ô được sử dụng. Trong việc thực hiện bản demo chúng ta có thể thấy điều này:

var myProvider = new PanoJS.TileUrlProvider('','',''); 
myProvider.assembleUrl = function(xIndex, yIndex, zoom) { 
    return MY_URL + '/' + MY_PREFIX + myPyramid.tile_filename(zoom, xIndex, yIndex); 
} 

Nếu chúng ta làm theo các đường mòn trong mã nguồn, biến zoom truyền vào người sử dụng định nghĩa assembleUrl phương pháp nên undefined hoặc một giá trị tiêu cực đó, giả sử các lỗi xảy ra trên tải, có thể là mức thu phóng được tính sai. Dòng tội thể là:

PanoJS.js[88] 
this.zoomLevel = (typeof options.initialZoom == 'undefined' ? -1 : parseInt(options.initialZoom)); 

nào có ý nghĩa theo này "analisis" vì giá trị mặc định trở lại là -1. Vì vậy, trong Tóm lại, bao gồm giá trị initialZoom khi khởi tạo panorama

viewer = new PanoJS(dom_id, { 
    initialZoom: 0, // and play with this value to see what happens 
    ... 
}); 

Ngoài ra, kiểm tra các giá trị của width và height trong kích hoạt của bạn

createViewer viewer, 'image_viewer', "#{url_base}/#{image_id}", "#{image_uuid}_", width, height, target_format

Nếu một trong những là tiêu cực, không hoặc không xác định , giá trị thu phóng có thể bị tính sai trên đường đi.

Xin lỗi vì quá chi tiết, điều này có thể giúp người khác và hy vọng bạn. Vui lòng cho chúng tôi biết nếu những đề xuất này hoạt động, nếu không, vui lòng đăng url nơi chúng tôi có thể thấy mã đang chạy.

Answer 2

Tôi nghĩ vấn đề là với việc thực hiện jQuery ..

jQuery(document).ready ($) -> 

    jQuery('#zoomimage').addimagezoom 
    largeimage: jQuery('#zoomimage').data('large-image-url'), 
    magnifiersize: [jQuery('#zoomimage').data('scaled-x-dimension'), 
      jQuery('#zoomimage').data('scaled-y-dimension')], 
    zoomrange: [2, 10] 

Một khi chúng ta đã khởi xướng jQuery từ khóa một phải sử dụng cùng thay vì $

Các lỗi được thực hiện tương tự như jQuery lỗi. vì $ sẽ không tìm nạp gì và sẽ gây ra lỗi không xác định để tăng.

Hãy thử điều này nếu công trình này,

Tôi không phải là bắt buộc của RUBY lập trình viên nhưng có thể kiểm tra JS :)