0

この投稿を読みました:ノックアウト JavaScript テーブルでテキスト リンクを作成するにはどうすればよいですか? 他のカップルと一緒に。

しかし、私はどこかで何かを見逃しているか、正しいアプローチをしていません。問題に関連するコードのチャンクを含めました。ノックアウトによって生成されたテーブルを使用して、タスクを更新または削除しようとしています。削除部分は正常に機能しています。タスクの更新に使用される別のページにリンクする更新を取得しようとしています。更新列でリンクを正しく機能させるために何をする必要があるのか​​ わかりません。

KO モデルに渡される辞書のリストに URL を配置する方法について、いくつかの異なるアプローチを試しました。私を正しい方向に導くためのアドバイスはありますか?情報が不足している場合は、お知らせください。ありがとうございました。

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

4

1 に答える 1