0

I have a javascript array which contains html for a bunch of templates.

var TemplateLibrary = [
    {
        name: "hero-1",
        code: '<header class="pt-xxl pb-xxl bps-pt-0 bps-pb-0 bps-height-100 ta-center bc-blue js-Template"><div class="display-table height-100 width-100"><div class="display-tableCell va-middle"><div class="width-90 bpm-width-50 horizontallyCenter"><h1 class="fs-xxxl lh-xxxl bps-fs-xxxxl bps-lh-xxxxl fw-3 color-white ls-s bps-ls-xs js-componentHighlightText">This is hero 1.</h1></div></div></div></header>'
    }
]

I have a click event which finds a specific template in the array and gets its content.

// Append component to text editor when clicked
$('.js-TemplateThumbnail').click(function() {
    // Get name of clicked template
    var TemplateName = $(this).data("name");

    // Find template in array
    var result = TemplateLibrary.filter(function (obj) {
        return obj.name === TemplateName;
    })[0];

    // Get template content
    var templateContent = result.code;

    // Define new template container
    var newTemplateContainer = $('<div class="position-relative hideChild bps-height-90 js-TemplateContainer">');

    // Insert selected template into new template container
    newTemplateContainer.html(templateContent);

    // Build new template
    $('.js-Canvas .js-TemplateContainer').last().after(newTemplateContainer);
});

My problem is, it's awkward editing those templates inside the array, so I want to move the "code" data into a file inside a different folder. How do I locate the filename and pull its contents using rails or ajax? Something like this?

var TemplateLibrary = [
    {
        name: "hero-1",
        code: '<%= ../js/templates/hero-1.html %>'
    }
]
colmtuite
  • 4,311
  • 11
  • 45
  • 67
  • Possible duplicate of [get html code using javascript with a url](http://stackoverflow.com/questions/6375461/get-html-code-using-javascript-with-a-url) – Andrew Li Oct 12 '16 at 01:38
  • also here [How do I load the contents of a text file into a javascript variable?](http://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable) – Canilho Oct 12 '16 at 01:39
  • I'm not sure what those answers mean. I would do something like code: ' $.ajax({ url: '/js/templates/hero-1.html' { } });'? – colmtuite Oct 12 '16 at 01:42
  • What exactly are your expectations and are you running `node.js` on server? – charlietfl Oct 12 '16 at 01:45
  • It's a rails app. I just want to move the huge html string into a file partial somewhere to clean up my javascript array. – colmtuite Oct 12 '16 at 01:46
  • that's fine, just be aware that you would need to use ajax to retrieve the html so handling will be different wherever you were using those templates before. If you need them to be accessible synchronously you might want to create a build process for them – charlietfl Oct 12 '16 at 01:49
  • I've update the question with more details. I'm really not sure what I'm doing, or how to make an ajax call. Hoping you can help – colmtuite Oct 12 '16 at 02:00

1 Answers1

0

Can you put the variable in the view? So it's there when the javascript needs to reference it.

// put this in the .html.erb file that includes the javascript
<script>
  var TemplateLibrary = [
    {
        name: "hero-1",
        code: '<%= @instance_variable %>'
    }
  ]
</script>

The instance variable is defined in the controller

Or, you could also put all of this in a partial and render it in the view. The main question here, can you define the js variable in the view?

Mark Swardstrom
  • 17,217
  • 6
  • 62
  • 70
  • I will have hundreds of these small html templates. They're not pages. They're small premade templates that will be pieced together by the user to create a page. Like an FAQ section, a header, footer etc. So I'm hoping I can just house the static templates in a /public/templates folder? – colmtuite Oct 12 '16 at 03:38
  • Yeah - you could put them in an isolated folder and `render(:partial => "path_to_partial")` – Mark Swardstrom Oct 12 '16 at 03:39
  • Like this? code: render(:partial => "public/templates/hero-1")? – colmtuite Oct 12 '16 at 03:42
  • in that case, it wouldn't be the app/public directory (which you may be hoping for), it would be the 'app/views/public' directory. I probably wouldn't name it that as it's not really public. Something more like 'templates' and put it somewhere in the /views tree. – Mark Swardstrom Oct 12 '16 at 04:41