Django：如何设置 jQuery-Raty 的静态设置？答案

【问题标题】：Django: How to setup the static settings for jQuery-Raty?Django：如何设置 jQuery-Raty 的静态设置？
【发布时间】：2012-10-07 20:12:27
【问题描述】：

我正在尝试让jquery.raty 与 Django 一起工作。我已经完美地设置了静态文件的服务，但是它似乎毕竟找到评级图像文件有问题。

我是这样设置的：

base.html（这里可以静态加载）

<script src="{{ STATIC_URL }}raty/js/jquery.raty.min.js"></script>

模板：

<div id="star"></div>

$('#star').raty({
      cancel    : true,
      cancelOff : 'cancel-off-big.png',
      cancelOn  : 'cancel-on-big.png',
      half      : true,
      size      : 24,
      starHalf  : 'star-half-big.png',
      starOff   : 'star-off-big.png',
      starOn    : 'star-on-big.png'
    });

但我看到的不是星号：

这是我在刷新页面时从服务器收到的消息：

[07/Oct/2012 21:03:48] "GET /contact/add/img/star-off-big.png HTTP/1.1" 200 9941

我不明白为什么它会查看当前位置 (http://127.0.0.1:8000/contact/add/) 并将/img/xxx.png 附加到/contact/add/。

如何使用 STATIC_URL 路径在 javascript 中设置图像的路径？

非常感谢您对此提供的帮助。

【问题讨论】：

标签： django raty

【解决方案1】：

Raty 的默认path 是“img”。尝试将 path 作为绝对 URL 传递：

$('#star').raty({
    cancel    : true,
    cancelOff : 'cancel-off-big.png',
    cancelOn  : 'cancel-on-big.png',
    half      : true,
    size      : 24,
    starHalf  : '../raty/img/star-half-big.png',
    starOff   : 'star-off-big.png',
    starOn    : 'star-on-big.png',
    path      : '{{ STATIC_URL }}img' // <-- or wherever your raty images are
});

编辑：

一种使用jQuery“命名空间”变量在其他外部javascript文件中使用STATIC_URL的方法。这将在模板的<head> 中定义，after 包括 jQuery，但 before 任何使用定义变量的脚本。

<script type="text/javascript">  
    $.myproject = {} // namespace
    $.myproject.STATIC_URL = '{{ STATIC_URL }}';
</script>

然后，当需要静态资产的绝对 URL 时，您的其他脚本可以使用 $.myproject.STATIC_URL。

【讨论】：

感谢 Micah 的回复。我只是没有运气就试过了。您确定 {{ STATIC_URL }} 在 base.html 中被完美地翻译成正确的 url，在 myApp.js 中也被接受吗？我不确定，因为 Django 框架需要转换它，我不确定这是否可以在 javascript 中实现。
哦，我还以为JS直接在你的模板里呢。不，这在 myApp.js 中不起作用（因为我认为这是作为静态内容提供的）。您可以尝试在那里对其进行硬编码，以查看这是否确实是问题所在。我经常在我的 Django 模板（例如 base.html）的头部有一个 JS 部分，它为路径定义全局变量或命名空间 VAR，以避免在 JS 中硬编码绝对 URL。
啊，这听起来很合理。您能否给我一个如何使用全局命名空间 VAR 的示例，以便我稍后可以在我的 myApp.js 中访问它？谢谢
用一个例子编辑了我的答案。

【解决方案2】：

最简单的方法是全局设置路径，以防你要使用多个评级，这样你就不需要到处重复了。

<script type="text/javascript" src="{{ STATIC_URL }}raty/jquery.raty.min.js"></script>
<script type="text/javascript">
    $.fn.raty.defaults.path = '{{ STATIC_URL }}raty/img';
</script>

【讨论】：