YII2。 在js中使用URL

Question

I have the following javascript code

$(".order-event-btn").click(function(e) {
$.ajax({
url: "URL",
type: "POST",
data: {
    eventId: $(e.target).attr('data-event-id'),
},
success: function(data) {
    //Some code
},
error: function(data) {
    //Some code
},
});
});

I include this script using "BookAsset".

Here

url: "URL",

I need URL to the action "book-event" in the controller Book.

On the server, I can do this:

 Url::to('/book/book-event')

But how do I get URL on client side?

There is an solution:

1. js file include via BookAsset.

2. in view file I register bundle:

\frontend\assets\BookAsset::register($this);

3. in view file define a bookEventURL variable. Now it is available in the js-file.

$this->registerJs('var bookEventURL = ' . Url::to('/book/book-event') . ';');

But I do not like this solution. What will happen when I use this script in many views. I have to define a variable bookEventURL in each view?

My Question. Is it possible to bind js-variables to my BookAsset. When I register my BookAsset in the view, in page source code automatically insert next code:

<script>var bookEventURL = "http://example.com/book-event/";</script>

Answer 1

A proper way of doing this is to add the needed information in your button tag, e.g. :

<?= Button::widget([
    'label' => 'Order',
    'options' => [
        'class' => 'order-event-btn',
        'data' => [
            'url' => Url::to(['book/book-event']),
        ],
    ],
]) ?>

And in your js code :

$(".order-event-btn").click(function(e) {
    var url = $(this).data('url');
    // ...
});

But if you really want to "bind js-variables" to your BookAsset, you could simply override register() :

public static function register($view)
{
    parent::register($view);
    $view->registerJs('var bookEventURL = ' . json_encode(Url::to(['book/book-event'])) . ';');
}