SilverStripe 3.3 - 添加 CMS 字段作为 JavaScript 变量答案

【问题标题】：SilverStripe 3.3 - Add CMS Fields as JavaScript variablesSilverStripe 3.3 - 添加 CMS 字段作为 JavaScript 变量
【发布时间】：2016-06-21 06:14:22
【问题描述】：

我正在为 SilverStripe 项目尝试一些不同的方法：我需要找到一种方法来获取 CMS 中的字段并将它们放入 JavaScript 变量中以便在 JavaScript 文件中使用。

对于初学者，我在 Page.php 中有一个 Header CMS 字段：

private static $db = array(
    'Header' => 'HTMLText'
);

public function getCMSFields() {
    $fields = parent::getCMSFields();

    $fields->addFieldToTab('Root.Main', new HTMLEditorField('Header', 'Header'));

    return $fields;
}

我想在 JavaScript 文件中引用该字段作为变量：

       {
            id: 'Text-Intro',
            type: 'text',
            rect: ['251px', '250px','641px','71px','auto', 'auto'],
            text: [Header variable needs to go here],
            align: "left",
            font: ['Arial, Helvetica, sans-serif', 25, "rgba(0,0,0,1.00)", "500", "none", "normal"]
        },

我尝试使用Requirements::javascriptTemplate() 函数，但在detail-page_edge.js 文件中无法识别该变量：

public function init() {
    parent::init();

    Requirements::javascriptTemplate('/themes/simple/javascript/detail-page_edge.js', array(
        'Header' => $this->Header
    ));
}

一定是缺少了什么，或者这只是过时了？我以前从未在 SilverStripe 中尝试过这个。不过，考虑到这个项目的设置方式，我没有太多选择。

【问题讨论】：

标签： javascript silverstripe

【解决方案1】：

您可以使用 SilverStripe 模板语法进行简单的变量替换。所以你的 JS 文件应该是：

// ... plain JS code
text: '$Header',
// ... more JS code

请注意，您不能使用更复杂的模板语法，例如<% loop … %> 或<% if … %>，因为javascriptTemplate 只会进行变量替换。

如果您需要完整的模板功能，您可以将.ss 模板文件渲染为字符串并使用Requirements::customScript 输出。不过，我认为您不应该这样做……即使通过javascriptTemplate 处理JS 文件似乎也不行。我宁愿在您的常规标记中使用 HTML 数据属性（例如 .ss 模板），并以一种能够获取所需属性并基于标记构建的方式编写 JavaScript。

另外：确保您的文件路径正确。而不是写绝对路径：

'/themes/simple/javascript/detail-page_edge.js'

我建议你使用以下：

$this->ThemeDir() . '/javascript/detail-page_edge.js'

【讨论】：