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

Question

我的控制器上有一些值要传递给视图页面中的 javascript 函数。

在控制器中，我有：

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

我可以使用 {{@value}} 访问视图上的值，但是如何在 javascript 函数中使用（访问）该值查看页面??

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

Answer 1

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

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

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

如果是整数，则以下代码有效：

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

...虽然你的IDE可能会报告语法错误。

如果它是一个浮点数，下面的代码将起作用：

<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.

Answer 2

我比那更懒了。

我的数据在字典文件中 (F3)。我将它加载到页面底部的输入字段中，并通过模板分配值。我使用 Jquery（可以使用普通 JS）来检索值。

例如：字典数据

'prf_conf'=>' Update your profile'

在我的profile.html

    `< input type = 'hidden' id ='prf_conf' value='{{@prf_conf}}'  >` 
//this loads data in whatever language on my page

JS

Confirm button text: (i used jquery-confirm.min.js in this example)
    $.confirm({ title: $('#prf_conf').value()

…有点体操但效果很好。没有 IDE 问题…

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

Pass variables from controller to javascript function in Fat-Free Framework

javascript

fat-free-framework

技巧一：

技巧二：

技术 2 之二：

技巧三：