Question

在我的视图中添加javascript会产生ReferenceError: $ is not defined。我认为问题是由于Yii2在我的页面上最后注入脚本。如何解决这个问题？

或者我如何阻止Yii2自动加载脚本文件？

我的观点

  <?php

   use yii\helpers\Html;
   use yii\helpers\ArrayHelper;
   use yii\helpers\UrlManager;
   use yii\widgets\ActiveForm;
   use backend\controllers\StandardController;

   use backend\models\standard;


   ?>

 <div class="domain-form">

<?php $form = ActiveForm::begin(); ?>

<?php



    <?= $form->field($model, 'clause')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'name')->textarea(['rows' => 6]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

   </div>

    <script type="text/javascript">
    $("document").ready( function () {
    alert("hi");
    });</script>

我需要让这个简单的脚本在页面加载后显示警告。我没有在这里调用任何脚本文件，因为yii在布局中通过调用

自动加载（我认为）

  AppAsset::register($this);

这导致脚本文件在我的自定义脚本之后在页面末尾注册。

如何解决这个问题？

Answer 1

Yii2最后在你的页面上注入脚本（jquery等）。这是有意的。但这意味着jQuery将在你的脚本之后加载，所以当你的脚本运行时，jQuery还不存在。

快速测试的最简单方法是将yii-scripts（jquery等）移动到页面的头部。修改assets\AppAsset.php并添加：

public $jsOptions = array(
    'position' => \yii\web\View::POS_HEAD
);

完成！

但是在制作中你通常希望脚本最后加载，而你让Yii2处理你的javascript：

$this->registerJs(
    '$("document").ready(function(){ alert("hi"); });'
);

现在Yii将处理这个js并将它放在任何重要的东西之后（比如jQuery）。

然而，您很快就会注意到IDE通常不善于处理这种语言嵌套（PHP中的JavaScript），因此语法突出显示可能会中断。解决它的一种方法是在单独的文件中注册脚本：

$this->registerJsFile( 'myScript.js' );

如果您想要更多地控制加载脚本的顺序，可以添加依赖项作为第二个参数，并将其他选项添加为第三个参数：

$this->registerJsFile( 
    'myScript.js', 
    ['\backend\assets\AppAsset'],  
    ['position' => '\yii\web\View::POS_END']
);

如果您出于某种原因绝对希望脚本能够内联呈现，您可以这样做：

$this->registerJs( $this->renderPartial('myScript.js') );

添加脚本的推荐方法是使用AssetBundles。查看assets/AppAssets.php并将您的js文件添加到$ js-array。

Answer 2

每当您需要某些资产用于库特定用途时，请在视图文件中注册它们，如下所示：

use yii\web\JqueryAsset;
JqueryAsset::register(this);

或者，如果您将yii\web\JqueryAsset添加到$depends内的AppAsset属性，则会自动为所有视图加载资源，前提是您已在主要布局中注册（默认在Yii2样板中。）

我想在我的项目中使用kartik-v的yii2-date-range，并且这样做了：

use kartik\daterange\DateRangePicker;
use kartik\daterange\MomentAsset;
use yii\web\JqueryAsset;

JqueryAsset::register(this);
MomentAsset::register(this);
...
echo DateRangePicker::widget([ 
    'model' => $model, 
    ...
]);

由于我切换到twig模板，我最终在我的视图中使用了以下代码：

{{ use('kartik/daterange/DateRangePicker') }}
{{ use('kartik/daterange/MomentAsset') }}
{{ use('yii/web/JqueryAsset') }}
{{ register_jquery_asset() }}
{{ register_moment_asset() }}
...
{{ date_range_picker_widget({ 
    'model': model, 
    ...
   }) }}

ReferenceError：$未定义yii2

2 个答案: