Рендеринг статического HTML в Meteor/Blaze

Я пытаюсь включить статический HTML + JavaScript внутри приложения Meteor/Telescope (telesc.pe) и не смог получить работу с Blaze.Рендеринг статического HTML в Meteor/Blaze

Чтобы создать более простой случай, чем мой оригинал, я попытался вставить простой блок кода HTML + javascript (очень простая визуализация D3.js, создающая круг) через Meteor, который ниже. Этот HTML блок хранится внутри коллекции в MongoDB и получить доступ, используя шаблон ниже

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script> 
    <h1>Circle</h1> 
    <div id="viz"></div> 
    <h1>/Circle</h1> 
    <script type="text/javascript"> 

    var sampleSVG = d3.select("#viz") 
     .append("svg") 
     .attr("width", 100) 
     .attr("height", 100); 

    sampleSVG.append("circle") 
     .style("stroke", "gray") 
     .style("fill", "white") 
     .attr("r", 40) 
     .attr("cx", 50) 
     .attr("cy", 50) 
     .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) 
     .on("mouseout", function(){d3.select(this).style("fill", "white");}); 

    </script>

Я его включения в Meteor в качестве немаскированном тега. например

<template name="post_body"> 
    {{{ htmlBody }}} 
</template>

HTML, внутри фрагмента выше делает правильно (текст Круг и/Circle), но он не появляется, чтобы попытаться загрузить какой-либо из яваскрипта элементов, которые я включил.

Я полностью осознаю, что это не оптимальный способ загрузки визуализации в приложение Meteor, но, скорее всего, это нужно будет сделать так, поскольку (более сложные) визуализации, которые я использую, генерируются статически, используя внешнее приложение.

Любая помощь в том, как получить эту работу будет очень признательна!

источник

2015-03-08 Alex

Вы не можете использовать теги <script> внутри шаблонов Meteor. Meteor анализирует ваш шаблон, чтобы отобразить его в DOM как объекты DOM и не выполняет встроенный JavaScript.

Это очень легко достичь того, что вы пытаетесь сделать. Во-первых, возьмите эту строку:

<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>

И поместить его в <head> вашего файла index.html, или любой другой HTML-файл является точкой входа для приложения.

Далее возьмите код, который был в вашем рядный script блок и поместить его в rendered обратного вызова для шаблона:

Template.post_body.rendered = function() { 
    var sampleSVG = d3.select("#viz") 
     .append("svg") 
     .attr("width", 100) 
     .attr("height", 100); 

    sampleSVG.append("circle") 
     .style("stroke", "gray") 
     .style("fill", "white") 
     .attr("r", 40) 
     .attr("cx", 50) 
     .attr("cy", 50) 
     .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) 
     .on("mouseout", function(){d3.select(this).style("fill", "white");}); 
};

Он будет выполняться после того, как шаблон оказаны в DOM, как вы» d хотите. Для повышения производительности вы можете посмотреть на замену d3.select на this.find или this.findAll в пределах rendered, чтобы ограничить поиск DOM только контекстом шаблона. См. http://docs.meteor.com/#/full/template_find.

Если вы буквально имеете дело со страшным блоком HTML прямо из своей базы данных, который имеет теги <script> из вашего образца, вам нужно сначала проанализировать его как строку. Используйте регулярное выражение, чтобы найти src первого тега script (я дам вам найти много других ответов SO о том, как это сделать) и используйте $.getScript jQuery для загрузки этого сценария динамически. Используйте другое регулярное выражение, чтобы вытащить встроенный блок сценария и передать его в качестве обратного вызова к $.getScript. Насколько я ненавижу это говорить, вам нужно будет использовать eval:

Template.post_body.rendered = function() { 
    $.getScript(urlThatYouParsed, function() { eval(codeThatYouParsed); }); 
};

источник

2015-03-08 20:40:56

Рендеринг статического HTML в Meteor/Blaze

ответ

Смежные вопросы