如何在屏幕视图中动态更改.vt值

Question

我使用的是phalcon，.volt模板

我正在从数据库中获取一些数据(可预测性(。Svg有一条线路从0号线开始，到30号线结束。另一条线是关于第一条线绘制的，它应该显示一些可预测性

我的问题是它在小屏幕上看起来不好看，我需要更改(仅适用于移动视图30到20(

我知道php本身不能将屏幕大小检测为javascript(window.innerWidth(；

<svg >
<line x1="0" y1="0" x2="30" y2="0"  />
<line x1="0" y1="0" x2="{{ predictability * 30 / 100 }}" y2="0"/>
</svg>

有可能以某种方式将JS集成到.volt并动态更改固定数字30吗？

img

Answer 1

您可以让它们一起工作。假设您在Phalcon中使用Micro，并且您已经定义了view服务：

1. 在路由器中创建路径：

   $app->get('/view/home2/{size}',
   function ($size) use ($app) {
   echo $app->view->render('index/home2', 
   [
   'svgWidth' => $size
   ]);
   }
   );
   

2. 创建视图'/index/home2':

   <svg >
   <line x1="0" y1="0" x2="30" y2="0"  />
   <line x1="0" y1="0" x2="{{ predictability * <?php echo $svgWidth; ?> / 100 }}" y2="0"/>
   </svg>
   

在"索引/主页"页面的开头：

<script>
let url = window.innerWidth < 999 ? '/view/index/15' : '/view/index/30'; //or set a switch with more options for predictability value
window.location.replace(url);
</script>