web-dev-qa-db-ja.com

ReferenceError：$は定義されていませんyii2

ビュー内に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);

これにより、カスタムスクリプトの後、ページの最後にスクリプトファイルが登録されます。

これを解決するには？

phpyii2
32
Dency G B

Yii2は、ページの最後にスクリプト（jqueryなど）を挿入します。これは意図されており、望ましいものです。ただし、jQueryはスクリプトの後にロードされるため、スクリプトの実行時にはjQueryはまだ存在しません。

クイックテストの最も簡単な方法は、yiiスクリプト（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）の処理が苦手なので、構文の強調表示が壊れる可能性が高いことにすぐに気付くでしょう。それを解決する1つの方法は、スクリプトを別のファイルに登録することです。

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

スクリプトを読み込む順序をさらに制御したい場合は、2番目の引数として依存関係を追加し、3番目の引数として追加のオプションを追加できます。

$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に追加します。

81
ippi

ライブラリ固有の使用のためにいくつかのアセットが必要なときはいつでも、次のようにそれらをビューファイルに登録します。

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

または、yii\web\JqueryAssetをAppAsset内の$depends属性に追加すると、メインレイアウトで登録した場合、すべてのビューに対してアセットが自動的にロードされます（デフォルトでは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 templatingに切り替えたため、次のコードがビューに表示されました。

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