將陣列數據移入部分

我有一個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>' 
    } 
]

我有一個單擊事件，它在數組中找到特定模板並獲取其內容。

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

來源

2016-10-12 colmtuite

可能重複的[獲取html代碼使用JavaScript與URL]（http://stackoverflow.com/questions/6375461/get-html-code-using-javascript-with-a-url） – Li357

也在這裏[如何我將一個文本文件的內容加載到一個JavaScript變量？]（http://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into- a-javascript-variable） –

我不確定這些答案的含義。我會做類似的代碼：'.ajax（{url：'/js/templates/hero-1.html'{}}）;'？ – colmtuite

你可以把變量放在視圖中嗎？所以當JavaScript需要引用時，它就在那裏。

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

實例變量在控制器

或者，你也可以把所有這一切都在一個局部的和render它在視圖中定義。這裏的主要問題是，你可以在視圖中定義js變量嗎？

來源

2016-10-12 03:35:59 Swards

我會有數百個這樣的小html模板。他們不是網頁。它們是由用戶拼湊在一起以創建頁面的小型預製模板。像FAQ部分，頁眉，頁腳等。所以我希望我可以將靜態模板放在/ public/templates文件夾中？ – colmtuite

是的 - 你可以把它們放在一個單獨的文件夾中，並渲染（：partial =>「path_to_partial」）' – Swards

像這樣？ code：render（：partial =>「public/templates/hero-1」）？ – colmtuite

將陣列數據移入部分

回答

相關問題