如何在YII2view(视图)中优雅的书写Javascript

yii2 yii2 · best · 于 1个月前 发布 · 93 次阅读

概述

文件引用

$this->registerJsFile($url, $options = [], $key = null);

参数:

  • url JS文件的URL
  • options 其他属性
    • depends 数组, 依赖引用, 指定Asset 类
    • position 注入的位置
      • POS_HEAD:头部(header内)
    • POS_BEGINbody 开始
    • POS_END body 结束前
    • appendTimestamp 添加时间戳(一般用于刷新cdn缓存)
  • key 设置文件引用的key, 同名文件的时候不会被覆盖.

页面嵌入

如下例中, ajax请求中,经常会是动态请求, url地址、参数等会随着页面的上下文环境而变化. 在js里面嵌入php代码就显得非常不友好. 所以,可以用下面方法构建,来减少php代码和js代码的复杂混合.


$options = Json::encode([
    'url' => Url::to(['update']),
    'type' => 'post',
    'data' => [
        'query' => $package->getFullName(),
    ],
    'success' => new \yii\web\JsExpression("function (html) {
        versions.removeClass('updating').html(html);
        btn.button('reset');
    }"),
    'beforeSend' => new \yii\web\JsExpression("function (event) {
        versions.addClass('updating').html($('<i class=\"fa fa-cog fa-spin fa-3x fa-fw\"></i>'));
        btn.button('loading');
    }"),
]);

$this->registerJs(<<<JS
    $('#fetch-btn').on('click', function () {
        var versions = $('.versions'), btn = $('#fetch-btn');
        $.ajax({$options});
    })
JS
);

本文由 best 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册