Question

我试图弄清楚如何使用django表单和淘汰赛将编辑后的数据保存回数据库。 edit.html文件已更改为使用knockout在编辑页面上显示和编辑信息。我需要弄清楚如何更改views.py文件以保存信息。该页面似乎表现得我想要它（我认为...），但我不知道如何在编辑发生后将信息更新回数据库，因为我没有在.html文件中使用django字段

我已阅读此主题：using knockout.js with django forms?，但这是使用html文件中的字段而不是淘汰代码。如果这是一种更好的方法，我并不反对走这条路，但是当我尝试它的时候，我正在努力实现这个想法。

views.py文件中的相关信息：

@render_to('phones/edit.html')
def EditPhone(request, number):
    p_number = PhoneTable.objects.get(number=number)
    customer_list = list(Customer.objects.values('customer_id'))
    JSON_customer_list = json.dumps(customer_list)

    if not request.POST:
        return dict(
            form=PhoneForm(instance=p_number),
            CallType=p_number.call_type,
            number=number,
            Customer=p_number.customer_id,
            extension=p_number.profile.extension,
            department=p_number.profile.department,
            JSON_customer_list=JSON_customer_list
        )

    form = PhoneForm(request.POST, instance=p_number)

    if not form.is_valid():
        return dict(form=form)

    form.save()

    messages.success(request, 'Phone Number updated')

    return redirect('phones:available_phones', number=p_number.number)

class PhoneForm(ModelForm):

    class Meta:
        model = PhoneTable

这是html文件：

{% block pagetitle %}Edit Phone Number: {{ number }}{% endblock %}
{% block content %}
        <div class="row">
            <div class="span2">
                <div class="pull-right">Call Type:</div>
            </div>
            <div class="span6">
                <select data-bind="options: callTypes, value: callType"></select>
            </div>
        </div>
        <div class="row">
            <!-- ko if: callType() === "Direct" -->
                <div class="span2">
                    <div class="pull-right">Extension:</div>
                </div>
                <div class="span6">
                    <input type="text" data-bind="value: editExtension" />
                </div>
            <!-- /ko -->
        </div>
        <div class="row">
            <!-- ko if: callType() === "Sales" -->
                <div class="span2">
                    <div class="pull-right">Customer:</div>
                </div>
                <div class="span6">
                    <select data-bind="options: customerDisplays, value: selectedCustomer"></select>
                </div>
            <!-- /ko -->
        </div>
        <div class="row">
            <!-- ko if: callType() === "Service" -->
                <div class="span2">
                    <div class="pull-right">Service Profile:</div>
                </div>
                <div class="span6">
                    <select data-bind="options: servProfiles, value: servProfile"></select>
                </div>
            <!-- /ko -->
        </div>

        <div class="form-actions">
            <input type="submit" class='btn btn-primary' value="Update" />
            <a class="btn" href="{% url phones:available_phones %}">Cancel</a>
        </div>
{% endblock %}

{% block javascript_compress %}
<script type='text/javascript' src="{% static 'js/knockout/knockout.js' %}"></script>
<script type="text/javascript">
    $(function(){
        customerListFromServer = {{ JSON_customer_list|safe }};

        var PhoneViewModel = function() {
            var self = this;

            customerList = [];
            for (var key in customerListFromServer) {
                customerList.push(customerListFromServer[key].customer_id);
            }

            self.callTypes = ko.observableArray(['Free', 'Direct', 'Sales', 'Service']);
            self.callType = ko.observable("{{ CallType }}");
            self.editExtension = ko.observable("");
            self.servProfiles = ko.observableArray(["{{ extension }}", "{{ department }}"]);
            self.servProfile = ko.observable();
            self.customerDisplays = ko.observableArray(customerList);
            self.selectedCustomer = ko.observable();

        }

        ko.applyBindings(new PhoneViewModel());

    });

</script>
{% endblock %}

有什么建议吗？如果我遗失了什么，请告诉我。谢谢。

Answer 1

我想出来了，所以我会发布它是否可以帮助其他任何人。

我在html文件中添加了一个表单id和post方法以及一个隐藏字段。正如Kevin建议的那样，我在提交按钮上使用了数据绑定，并向ko viewModel添加了一个提交函数。然后我更改了views.py文件以获取json数据并保存已编辑的值。

@render_to('phones/edit.html')
def EditPhone(request, number):
    p_number = PhoneTable.objects.get(number=number)
    customer_list = list(Customer.objects.values('customer_id'))
    JSON_customer_list = json.dumps(customer_list)

    if not request.POST:
        return dict(
            form=PhoneForm(instance=p_number),
            CallType=p_number.call_type,
            number=number,
            Customer=p_number.customer_id,
            extension=p_number.profile.extension,
            department=p_number.profile.department,
            JSON_customer_list=JSON_customer_list
        )

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

    p_number.call_type = obj.get("callType")
    p_number.customer_id = obj.get("selectedCustomer")
    p_number.profile.extension = obj.get("editExtension")
    p_number.profile.department = obj.get("servProfile")

    p_number.save()

    messages.success(request, 'Phone Number updated')

    return redirect('phones:available_phones')

class PhoneForm(ModelForm):

    class Meta:
        model = PhoneTable

html文件：

{% block pagetitle %}Edit Phone Number: {{ number }}{% endblock %}
{% block content %}
    <form id="phone_form" method="post">
    {% csrf_token %}
    <input type="hidden" id="json_blob" value="" />
    <fieldset>
        <div class="row">
            <div class="span2">
                <div class="pull-right">Call Type:</div>
            </div>
            <div class="span6">
                <select data-bind="options: callTypes, value: callType"></select>
            </div>
        </div>
        <div class="row">
            <!-- ko if: callType() === "Direct" -->
                <div class="span2">
                    <div class="pull-right">Extension:</div>
                </div>
                <div class="span6">
                    <input type="text" data-bind="value: editExtension" />
                </div>
            <!-- /ko -->
        </div>
        <div class="row">
            <!-- ko if: callType() === "Sales" -->
                <div class="span2">
                    <div class="pull-right">Customer:</div>
                </div>
                <div class="span6">
                    <select data-bind="options: customerDisplays, value: selectedCustomer"></select>
                </div>
            <!-- /ko -->
        </div>
        <div class="row">
            <!-- ko if: callType() === "Service" -->
                <div class="span2">
                    <div class="pull-right">Service Profile:</div>
                </div>
                <div class="span6">
                    <select data-bind="options: servProfiles, value: servProfile"></select>
                </div>
            <!-- /ko -->
        </div>

        <div class="form-actions">
            <input type="submit" class='btn btn-primary' value="Update" data-bind="click: submitForm" />
            <a class="btn" href="{% url phones:available_phones %}">Cancel</a>
        </div>
{% endblock %}

{% block javascript_compress %}
<script type='text/javascript' src="{% static 'js/knockout/knockout.js' %}"></script>
<script type="text/javascript">
    $(function(){
        customerListFromServer = {{ JSON_customer_list|safe }};

        var PhoneViewModel = function() {
            var self = this;

            customerList = [];
            for (var key in customerListFromServer) {
                customerList.push(customerListFromServer[key].customer_id);
            }

            self.callTypes = ko.observableArray(['Free', 'Direct', 'Sales', 'Service']);
            self.callType = ko.observable("{{ CallType }}");
            self.editExtension = ko.observable("");
            self.servProfiles = ko.observableArray(["{{ extension }}", "{{ department }}"]);
            self.servProfile = ko.observable();
            self.customerDisplays = ko.observableArray(customerList);
            self.selectedCustomer = ko.observable();

            self.submitForm = function() {
                $("#json_blob").val(ko.toJSON(self));
                $("#phone_form").submit();
            }
        }

        ko.applyBindings(new PhoneViewModel());
    });

</script>
{% endblock %}

Answer 2

通过淘汰赛，我通常希望通过视图模型尽可能多地控制，包括将信息保存回服务器。在你的情况下，我会让提交按钮在视图模型中执行一个保存功能，如下所示：

HTML：

<input type="submit" class='btn btn-primary' value="Update" data-bind="click: submitForm" />

在你的淘汰视图模型中，有几种方法可以保存数据：

self.submitForm = function () {
    // save via postback
    ko.utils.postJson('/EditPhone', ko.toJSON(self));


    // save via ajax
    $.ajax({
        type: 'POST',
        data: ko.toJSON(self),
        url: '/EditPhone',
        success: function () {
            alert("saved");
        },
        error: function () {
            alert("no worky");
        }
    })
}

不幸的是，我没有使用django的经验所以我不确定你需要如何设置它以接受返回服务器的json数据

使用django和knockout将编辑后的数据保存回数据库

2 个答案: