Gỡ bỏ JS loại bỏ Bản cập nhật hoãn lại

Question

Tôi đang gặp sự cố khi bật cập nhật bị trì hoãn trong thư viện loại trực tiếp. Tôi đã triển khai Jquery datatables như một thành phần, khi điều hướng đến một khung nhìn có thành phần này tôi có thể thấy các phương thức sau được gọi theo thứ tự. Getview> Kích hoạt> Đính kèm

mọi thứ hoạt động như mong đợi

Nhưng nếu tôi bấm f5 và làm mới trang chứ không phải là điều hướng đến nó từ một trang khác nó phá vỡ và các phương pháp sau đây được gọi là

Getview> Kích hoạt > Đính kèm> Getview> Kích hoạt> Đính kèm> Detach> Detach (không chắc chắn lý do tại sao nó được gọi là hai lần cuối) và nó phá vỡ, không có bảng hiển thị trên giao diện người dùng ở tất cả vì nó không render từ những gì tôi có thể nói, tôi nghĩ rằng nó có một cái gì đó để làm với chuyển tiếp sầu riêng và có một sự khác biệt giữa điều hướng đến một trang và làm mới một trang kinda nắm bắt tại ống hút tho.

Đây là một lớp học tối thiểu mà sao chép các vấn đề đối với tôi, lưu ý tôi không có một tập tin HTML cho thành phần này tôi muốn sử dụng phương pháp getView để vượt qua trong một số HTML động từ JQueryDT

Tôi tạo ra một mẫu nhanh dự án với mức tối thiểu cần thiết để nhân rộng vấn đề. https://bitbucket.org/dchosking1988/deferred-update-example

Nếu bạn kéo và chạy nó, bạn sẽ thấy rằng "hello world" sẽ biến mất khi bạn làm mới trang nhưng sẽ không sao nếu bạn điều hướng giữa các tab.

các bước chung tôi được sử dụng để tái tạo vấn đề này là

1) tải về dự án mẫu

2) thêm phần kiểm tra (xem repo trên cho tệp mẫu)

3) cho phép cập nhật chậm

4) vô hiệu hóa bộ nhớ đệm xem

4) cố gắng soạn thể hiện mới của các thành phần

Chỉnh sửa để cung cấp cho biết thêm

* Đây không phải là một vấn đề DataTable JQuery, nó được nhân rộng với những điều sau

Vì vậy, bạn không cần phải tải về gitRepo, đây là đoạn code tôi có thể sao chép vấn đề trong dự án mẫu theo các bước trên.

define([], 
function() { 
    var test = function() { 
     var self = this; 

     var defaultViewHtml = '<div> <h1>Hello World</h1></div>'; 
     var currentView = null; 

     self.getView = function() { 
      console.log('GetView'); 
      if (!currentView) { 
       currentView = $(defaultViewHtml)[0]; 
      } 
      return currentView; 
     }; 

     self.activate = function (activateOptions) { 
      console.log('Activate'); 
     }; 

     self.attached = function (view, parent, settings) { 
      console.log('Attatched'); 
     }; 

     self.detached = function (view, parent) { 
      console.log('Detatched'); 
     }; 
    }; 

    return test; 
}); 

Sau đó Add HTML này để index.html, cũng không quên tạo một thể hiện của lớp trong index.js

<div class="whiteRow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div data-bind="compose: { model: test }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

này xảy ra bởi vì nó gọi mã hai lần và lần thứ hai được gọi là currentView vẫn trống trong test.js, tôi đã nhận xét độ căng nơi bạn đặt currentView và mã hoạt động.

self.getView = function() { 
       console.log('GetView'); 
       //if (!currentView) { 
       // currentView = $(defaultViewHtml)[0]; 
       //} 
       return currentView; 
       }; 

-

<div class="whiteRow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div data-bind="compose: { model: test }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

define([], 
function() { 
var test = function() { 
    var self = this; 

    var defaultViewHtml = '<div> <h1>Hello World</h1></div>'; 
    var currentView = null; 

    self.getView = function() { 
      console.log('GetView'); 
      return currentView; 
      }; 

    self.activate = function (activateOptions) { 
     console.log('Activate'); 
    }; 

    self.attached = function (view, parent, settings) { 
     console.log('Attatched'); 
    }; 

    self.detached = function (view, parent) { 
     console.log('Detatched'); 
    }; 
    }; 

    return test; 
}); 

currentView ở lại trống trong test.js,