Django reverse（）for JavaScript

Question

在我的項目中，我有很多Ajax方法，帶有外部客戶端腳本（我不想將JavaScript包含到模板中！），並且更改URL對我來說是一種痛苦，因爲我需要手動更改我的Ajax調用中的URL。

是否有某種方法可以模仿{% url %} templatetag在JavaScript中的行爲？

例如，打印urlpatterns以^ajax開頭，後來在腳本中用它們的實際值替換模式？

這就是我的想法，我的問題是 - 是否有任何常見做法來做這樣的事情？也許一些可重用的應用程序？另外，我會很樂意閱讀您的任何建議和相關想法。

更新1： 我說的是計算的網址，而不是靜態的：

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

Answer 1

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

dutils是一個小工具庫，旨在提供的JavaScript/Django開發的幾個實用工具，這將有助於開發RIA在Django的後端之上。

它目前支持以下功能：

• 產生的Django的URL反向方法...

Answer 2

我通常做的就是把網址在任何一個<input type="hidden" />元素，或在rel=""屬性。

然後，寫JS時（使用下面jQuery）我做的：

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

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

非標準屬性是由所有主要的瀏覽器和隱藏要素很好的支持並不一定要在形式。

Answer 3

將JavaScript放入模板會出現什麼問題？

您經常想要在HTML模板中調用初始化函數，那麼爲什麼不傳遞一個包含您將使用的URL的對象？

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

如果你發現自己路過很多變量的這種方式，或者想在你的JavaScript您在HTML模板做使用的邏輯，那麼爲什麼不通過Django的模板引擎渲染你的腳本？請記住，Django模板不僅適用於HTML文檔 - 通常它有助於使用純文本，XML，JSON以及甚至是JavaScript的模板。擔心表現？然後緩存結果。

Answer 4

我創建了一個建立在你的Django項目的URL模式列表的機制，輸出一個Javascript文件。它是django-js-utils的一個分支。

回購鏈接是在這裏： https://github.com/Dimitri-Gnidash/django-js-utils

Answer 5

嘗試生成URL字符串創建JavaScript的輔助函數（Django的模板）。在簡單的形式，他們可能看起來像這樣：

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

也許這有一些其他的影響，但我認爲它應該工作。

Answer 6

首先，您應該爲您的網址：

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

然後，你可以通過網址作爲變量的模塊：

<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); 
    } 
}; 

你可以在你的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); 
    } 
}; 

請注意，您的令牌應該與正則表達式類型匹配才能成功解析（我不能使用{item_id}作爲標記，因爲它的定義爲\d+）。

我對這個解決方案有點不滿意，最後我寫了自己的應用程序來處理javascript與Django：django.js。有了這個應用程序，我可以這樣做：

{% 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(); 
}); 

Answer 7

我們創建了一個小的應用程序用於此目的稱爲django-js-reverse。

例如，您可以檢索名爲url

urls.py：？？

URL（R'^/betterliving /（P [ - \ W] +）/（P \ d + ）/ $」， 'get_house'，名稱= 'betterliving_get_house'），

以JavaScript等

：

網址。betterliving_get_house（ '家'，12）

結果：

/betterliving /房子/ 12/

Answer 8

可以從URL中刪除參數，並通過動態部分作爲查詢參數：

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

Answer 9

我發現這個很酷的django應用程序叫Django JS反向

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

如果你有一個像

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

一個網址，然後你就

Urls.betterliving_get_house('house', 12) 

結果是

/betterliving/house/12/