Ngăn mẫu từ hủy bỏ các phần tử DOM

Question

Tôi đang cố tích hợp một hình ảnh D3.js vào ứng dụng Meteor. Sau khi trang được tải, một hàm D3 sẽ chèn các phần tử DOM vào một mẫu <div> trong mẫu của tôi, dựa trên dữ liệu có sẵn.

Bất cứ khi nào có bản cập nhật phản ứng ở bất cứ đâu trên trang, tuy nhiên, Meteor đổ nội dung của mẫu được hàm D3.js của tôi tiêm vào. Tôi có thể chèn lại các yếu tố, nhưng điều này dẫn đến một nhấp nháy không mong muốn và giảm hiệu suất.

Bất kỳ ý tưởng nào về cách ngăn chặn sự sụt giảm các phần tử được tiêm bên ngoài này? Tôi thu thập rằng vì các yếu tố này không phải là một phần của mẫu ban đầu, chúng bị loại bỏ như là một phần của quá trình 'dọn dẹp' của Meteor.

Answer 1

Với sự ra đời của động cơ Spark Templating trong phiên bản 0.4.0, họ đã giới thiệu {{#constant}} người trợ giúp chặn để giải quyết vấn đề này.

http://meteor.com/blog/2012/08/31/introducing-spark-a-new-live-page-update-engine

template html của bạn nên giống như thế này ....

<template name="samplePageTemplate"> 
    <div id="samplePage" class="page"> 
     {{#constant}} 
     <div id="sampleGraph"></div> 
     {{/constant}} 
    </div> 
</template> 

Và javascript nên giống như thế này ...

Template.samplePageTemplate.destroyed = function() { 
    this.handle && this.handle.stop(); 
}; 
Template.samplePageTemplate.rendered = function() { 
    self.node = self.find("svg"); 
    if (!self.handle) { 
     self.handle = Meteor.autorun(function(){ 

      $('#sampleGraph').html(''); 
      renderChart(); 

     }); 
    }; 
}; 

function renderChart(){ 

    // lots of d3 chart specific stuff 

    var vis = d3.select("#sampleGraph").append("svg:svg") 
     .attr("width", window.innerWidth) 
     .attr("height", window.innerHeight) 
     .append("svg:g") 
     .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); 

    // more d3 chart specific stuff 

    }); 
}; 

Tôi đã đôi khi đã phải sử dụng self.node thay vì self.handle, nhưng nếu không nó sẽ khá thẳng về phía trước.

Answer 2

Bạn đã thử cung cấp id duy nhất cho các phần tử được tiêm D3 (hoặc ít nhất một phần tử gốc)? Từ tài liệu (http://docs.meteor.com/#livehtml):

Chỉ cần đảm bảo rằng mỗi phần tử có thể đặt tiêu điểm của bạn có id duy nhất hoặc có tên duy nhất trong bố mẹ gần nhất có một id. Meteor sẽ bảo toàn các phần tử này ngay cả khi mẫu kèm theo của chúng được hiển thị lại, nhưng vẫn sẽ cập nhật con của chúng và sao chép trên bất kỳ thay đổi thuộc tính nào.