javascript - 将变量从 Controller 传递到 Fat-Free Framework 中的 javascript 函数

Question

我的 Controller 上有一些值，我想将它们传递给 View 页面中的 javascript 函数。

在 Controller 中，我有:

$f3->set('value', $value);

我可以使用 {{@value}} 访问 View 中的值，但是如何在 View 页面上的 javascript 函数中使用(访问)该值？

<script type="text/javascript">
 var value = XXX; //XXX in the {{@value}}, how do i access it in here???
</script>

Answer 1

这取决于$value中存储的内容。

如果它是一个基本的字符串，里面没有单引号/双引号，那么下面的代码将起作用:

<script>
  var value='{{ @value }}';
</script>

如果它是一个整数，下面的代码将起作用:

<script>
  var value={{ @value }};
</script>

...尽管您的 IDE 可能会报告语法错误。

如果它是一个 float ，下面的代码将起作用:

<script>
  var value={{ str_replace(',', '.', @value) }};
</script>

... 并且您的 IDE 也可能会报告语法错误。注意:str_replace 适用于将小数点分隔符设置为逗号的非英语语言环境。

对于所有其余部分(包括引号或数组的字符串)，您应该使用以下技术之一将数据转换为 JSON:

技巧一:

将数据转换为 JSON 并将其转储为 JS 对象。

// controller.php (JSON encode)
$f3->set('data',json_encode($data));

<!-- template.html -->
<script>
  var data={{ @data | raw }};
</script>

优点:易于使用。

缺点:您的 IDE 将报告语法错误 + 对 raw 的额外调用。

技巧二:

将数据转换为JSON，转储为JS字符串并解析。

// controller.php (JSON encode + escape double quotes)
$f3->set('data',str_replace('\\u0022','\\\\u0022',
    json_encode($data,JSON_HEX_APOS|JSON_HEX_QUOT)));

<!-- template.html -->
<script>
  var data=JSON.parse('{{ @data | raw }}');
</script>

缺点:不太容易使用 + 额外调用 raw。

优点:您的 IDE 不会报告任何语法错误。

技术 2 之二:

在 F3 模板过滤器中嵌入技术 2。

// index.php
$tpl=Template::instance();
$tpl->filter('safejson',function($data){
  $raw=\View::instance()->raw($data);
  return str_replace('\\u0022','\\\\u0022',
    json_encode($raw,JSON_HEX_APOS|JSON_HEX_QUOT));
});

<!-- template.html -->
<script>
  var data=JSON.parse('{{ @data | safejson }}');
</script>

优点:易于使用 + 您的 IDE 不会报告任何语法错误。

缺点:对 raw 的额外调用。

技巧三:

将数据转换为 JSON 并将其嵌入到 DOM data- 属性中。

// controller.php (JSON encode)
$f3->set('data',json_encode($data));

<!-- template.html -->
<div id="foo" data-json="{{ @data }}"></div>
<script>
  var data=JSON.parse(document.getElementById('foo').dataset.json);
</script>

优点:易于使用 + 您的 IDE 不会报告任何语法错误 + 无需额外调用 raw。