English 中文(简体)
Django reverse() for JavaScript
原标题:

In my project I have a lot of Ajax methods, with external client-side scripts (I don t want to include JavaScript into templates!) and changing URLs is kind of pain for me because I need to change URLs in my Ajax calls manually.

Is there is some way to emulate the behavior of {% url %} templatetag in JavaScript?

For example, print urlpatterns starting with ^ajax and later in scripts replace patterns with their actual values?

That s what on my mind, and my question is - are there any common practices to do things like that? Maybe some reusable applications? Also I will be happy to read any advices and relevant thoughts you have.

Update 1: I m talking about computed URLs, not static ones:

url(r ^ajax/delete/(?P<type>image|audio)/(?P<item_id>d+)/from/set/(?P<set_id>d+)/$ ,  blog.ajax.remove_item_from_set ),
最佳回答

https://github.com/mlouro/django-js-utils

dutils is a small utility library that aims to provide JavaScript/Django developers with a few utilities that will help the development of RIA on top of a Django Backend.

It currently supports the following features:

  • Reverse method for generating Django urls...
问题回答

Try creating javascript helper functions (in django template) for generating url string. In simple form they could look like this:

function generete_some_url(id){
    return "{% url some_url itemid=112233 %}".replace("112233", id);
}

Maybe this has some other implications but I think it should work.

What s wrong with putting JavaScript in your templates?

You often want to call an initialisation function in your HTML template anyway, so why not pass it an object containing URLs you ll be using?

<script>
MYGLOBAL.mymodule.init({
    fancy_ajax_url:  {% url fancy %} ,
    fancier_ajax_url:  {% url fancier %} 
});
</script>

If you find yourself passing a lot of variable this way, or wanting to use logic in your JavaScript that you do in your HTML templates, then why not render your script through Django s templating engine? Remember, Django templates are not just for HTML documents - often it helps to use templates for plain text, XML, JSON, and yes even JavaScript. Worried about performance? Then cache the result.

I created a mechanism that builds a list of url patterns in your Django project and outputs that in a Javascript file. It is a fork of django-js-utils.

The repo link is here: https://github.com/Dimitri-Gnidash/django-js-utils

We created a small app called django-js-reverse for this purpose.

For example you can retrieve a named url

urls.py:

url(r ^/betterliving/(?P[-w]+)/(?Pd+)/$ , get_house , name= betterliving_get_house ),

in javascript like:

Urls.betterliving_get_house( house , 12)

result:

/betterliving/house/12/

What I usually do is put the URL in either an <input type="hidden" /> element, or in the rel="" attribute.

Then, when writing the JS (using jQuery below) I do:

$( div#show_more ).click(function () {
    var url = $(this).attr( rel );
    // or
    var url = $( #more_url ).val();

    $.get(url, function () { /* ... */ });
});

Nonstandard attributes are well supported by all major browsers and hidden elements don t have to be in forms.

First, you should name your url:

url(r ^blog/(?P<item_id>d+)/$ ,  blog.ajax.remove_item , name= blog-item ),

Then you could pass urls as variables to your module:

<script src="{{ STATIC_URL }}js/my-module.js"></script>
<script>
$(function(){
    MyModule.init( {% url blog-item item.id %} );
});
</script>
// js/my-module.js
var MyModule = {
    init: function(url) {
        console.log(url);
    }
};

You could use tokens in your url:

<script src="{{ STATIC_URL }}js/my-module.js"></script>
<script>
$(function(){
    MyModule.init("{% url blog-item item_id= 0000  %}");
});
</script>
// js/my-module.js
var MyModule = {
    init: function(url) {
        var id = 1;
        this._url = url;
        console.log(this.url(id));
    },
    url: function(id) {
        return this._url.replace( 0000 , id);
    }
};

Notice that your token should match the regex type to resolve successfully (I can t use {item_id} as token because it s defined with d+).

I was a little bit unsatisfied with this solution and I ended by writing my own application to handle javascript with django: django.js. With this application, I can do:

{% load js %}
{% django_js %}
{% js "js/my-module.js" %}
// js/my-module.js
var MyModule = {
    init: function() {
        var id = 1;
        console.log(Django.url( blog-item , id));
    }
};

$(function(){
    MyModule.init();
});

You can remove the parameters from the URL, and pass the dynamic parts as query parameters:

  $( #add-choice-button ).on( click , function () {
    var thing_id = $(this).closest( .thing ).attr( data-item-id );
    $.get( {% url  addThing  %}?t= +thing_id, function (data) {
      ...
    });
  });

I have found this cool django app called Django JS reverse

https://github.com/ierror/django-js-reverse

If you have a url like

url(r ^/betterliving/(?P<category_slug>[-w]+)/(?P<entry_pk>d+)/$ ,  get_house , name= betterliving_get_house ),

Then you do

Urls.betterliving_get_house( house , 12)

The result is

/betterliving/house/12/




相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签