Django链接在Knockout表中

时间:2013-09-09 16:01:51

标签: django knockout.js

我已经阅读了这篇文章:How can I create a text link in a Knockout javascript table?和其他几个人。

但是,我错过了某个地方,或者没有采取正确的方法。我已经为我的问题包含了相关的代码块。我试图使用knockout生成的表来更新任务或删除任务。删除部分工作正常。我试图让更新链接到用于更新任务的另一个页面。我无法弄清楚我需要做些什么才能使链接在更新列中正常工作。

我已经尝试了几种不同的方法来将url放在传递给KO模型的字典列表中。有什么建议引导我朝着正确的方向前进吗?如果我遗漏任何信息,请告诉我。谢谢。

Views.py

def TaskList(request, job_id):
    job_tasks = Tasks.objects.filter(parent=job_id)

    tasks_list = []
    for task in job_tasks:
        task_row = {}
        task_row['task_id'] = task.task_id
        task_row['t_name'] = task.name
        task_row['date'] = task.date_created
        task_row['state'] = task.state
        task_row['url'] = '{% url tracking:update_task task_id=task.task_id %}'
        tasks_list.append(task_row)

    json_tasks = json.dumps(tasks_list)

    if request.POST:
        json_data = request.POST.get('json_blob')
        obj = loads(json_data)

        task.task_id = obj.get("task_id")
        remove_task = Tasks.objects.get(task_id=task.task_id)
        remove_task.delete()

        messages.success(request, 'Task removed')

HTML

<table>
    <thead>
        <th>Name</th>
        <th>Date</th>
        <th>State</th>
        <th>Update</th>
        <th>Remove</th>
    </thead>
    <tbody data-bind "foreach: tasks">
        <tr>
            <td data-bind="text: t_name"></td>
            <td data-bind="text: date"></td>
            <td data-bind="text: state"></td>
            <td a class="btn" data-bind="attr: {href: url}">Update</a></td>
            <td button class="btn" data-bind="click: $root.remove_task">Remove</button></td>
        </tr>
    </tbody>
</table>

{% block javascript_variables_nocompress %}
window.TASKS = {{ json_tasks|safe }};
{% endblock %}

{% block javascript_compress %}
<script type='text/javascript' src="{% static 'js/knockout/knockout.js' %}"></script>
<script type="text/javascript">    
$(function() {
    var RemoveTaskModel = function () {
        var self = this;
        self.tasks = ko.observableArray(window.TASKS);

        self.remove_task = function(task) {
            self.tasks.remove(task);
            $("#json_blob").val(ko.toJSON(task));
        }
    }
    ko.applyBinding(new RemoveTaskModel());
});
</script>
{% endblock %}

HTML

1 个答案:

答案 0 :(得分:0)

我会使用reverse对每项任务的URL进行反向查找:

from django.core.urlresolvers import reverse

def TaskList(request, job_id):
    job_tasks = Tasks.objects.filter(parent=job_id)

    tasks_list = []
    for task in job_tasks:
        ...
        task_row['url'] = reverse('update_task', args=(),
            kwargs={'task_id': task_id})

然后你的observableArray应该能够将属性从JSON绑定到锚标记。您可能还会注意到,在您的代码示例中,您的td格式错误:

<td a class="btn" data-bind="attr: {href: url}">Update</a></td>

它应该是:

<td><a class="btn" data-bind="attr: {href: url}">Update</a></td>