33

在我的视图中添加 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);

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

如何解决这个问题？

4

2 回答 2

90

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。

于 2014-02-08T10:32:02.127 回答
0

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

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, 
    ...
   }) }}
于 2016-07-07T11:10:15.043 回答