Question

我有一个javascript数组，其中包含一堆模板的html。

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>'
    }
]

我有一个click事件，它在数组中找到一个特定的模板并获取其内容。

// 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);
});

我的问题是，在数组中编辑这些模板很尴尬，所以我想将“代码”数据移动到不同文件夹中的文件中。如何使用rails或ajax找到文件名并拉出其内容？像这样的东西？

var TemplateLibrary = [
    {
        name: "hero-1",
        code: '<%= ../js/templates/hero-1.html %>'
    }
]

Answer 1

你能把变量放在视图中吗？所以当javascript需要引用它时它就存在。

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

实例变量在控制器中定义

或者，您也可以将所有这些放在视图中的部分和render中。这里的主要问题是，你能在视图中定义js变量吗？

将阵列数据移动到部分

1 个答案: