Fatal编程技术网
  • django/
  • 使用django和knockout将编辑的数据保存回数据库

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

django knockout.js

使用django和knockout将编辑的数据保存回数据库,django,knockout.js,Django,Knockout.js,我试图找出如何使用django表单和knockout将编辑后的数据保存回数据库。edit.html文件已更改为使用knockout在编辑页面上显示和编辑信息。我需要弄清楚如何更改views.py文件以保存信息。该页面似乎正在按我希望的方式运行（我想…），但我不知道在编辑完成后如何将信息更新回数据库，因为我没有在.html文件中使用django字段 我读过这个线程：，但它使用html文件中的字段而不是敲除代码。如果这是一个更好的方法，我并不反对走这条路，但在我尝试这条路的时候，我对这条路的实现有点

我试图找出如何使用django表单和knockout将编辑后的数据保存回数据库。edit.html文件已更改为使用knockout在编辑页面上显示和编辑信息。我需要弄清楚如何更改views.py文件以保存信息。该页面似乎正在按我希望的方式运行（我想…），但我不知道在编辑完成后如何将信息更新回数据库，因为我没有在.html文件中使用django字段

我读过这个线程：，但它使用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 %}

{% 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 %}

{%block pagetitle%}编辑电话号码：{{Number}{%endblock%}
{%block content%}
呼叫类型：
分机：
客户：
服务简介：
{%endblock%}
{%block javascript_compress%}
$（函数（）{
customerListFromServer={{JSON_customer_list}安全}；
var PhoneViewModel=函数（）{
var self=这个；
customerList=[]；
for（customerListFromServer中的var键）{
customerList.push（customerListFromServer[key].customer\u id）；
}
self.callTypes=ko.observearray（['Free'，'Direct'，'Sales'，'Service']）；
self.callType=ko.observable（“{{callType}”）；
self.editExtension=ko.可观察（“”）；
self.servProfiles=ko.observearray（[{{extension}}，“{{department}}]）；
self.servProfile=ko.observable（）；
self.customerDisplays=ko.observearray（customerList）；
self.selectedCustomer=ko.observable（）；
}
应用绑定（新的PhoneViewModel（））；
});
{%endblock%}
有什么建议吗？如果我遗漏了什么，请告诉我。谢谢。

对于knockout，我通常喜欢通过视图模型尽可能多地进行控制，包括将信息保存回服务器。在您的情况下，我会让submit按钮在视图模型内执行保存功能，如下所示：

html:

不幸的是，我没有使用django的经验，因此我不确定您需要如何进行设置，以便使用knockout接受返回服务器的json数据，我通常喜欢通过视图模型尽可能多地进行控制，包括将信息保存回服务器。在您的情况下，我会让submit按钮在视图模型内执行保存功能，如下所示：

html:

不幸的是，我没有使用django的经验，因此我不确定您需要如何设置才能接受返回到服务器的json数据。我明白了这一点，因此我将发布如何帮助其他人

我在html文件中添加了一个表单id和post方法以及一个隐藏字段。正如Kevin所建议的，我在submit按钮上使用了一个数据绑定，并向ko viewModel添加了一个submit函数。然后我更改了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 %}
        <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 %}

{% 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 %}

{%block pagetitle%}编辑电话号码：{{Number}{%endblock%}
{%block content%}
{%csrf_令牌%}
呼叫类型：
分机：
客户：
服务简介：
{%endblock%}
{%block javascript_compress%}
$（函数（）{
customerListFromServer={{JSON_customer_list}安全}；
var PhoneViewModel=函数（）{
var self=这个；
customerList=[]；
for（customerListFromServer中的var键）{
customerList.push（customerListFromServer[key].customer\u id）；
}
self.callTypes=ko.observearray（['Free'，'Direct'，'Sales'，'Service']）；
self.callType=ko.observable（“{{callType}”）；
self.editExtension=ko.可观察（“”）；
self.servProfiles=ko.observearray（[{{extension}}，“{{department}}]）；
self.servProfile=ko.observable（）；
self.customerDisplays=ko.observearray（customerList）；
self.selectedCustomer=ko.observable（）；
self.submitForm=函数（）{
$（“#json_blob”）.val（ko.toJSON（self））；
$（“#电话表格”）.submit（）；
}
}
应用绑定（新的PhoneViewModel（））；
});
{%endblock%}
我发现了这一点，因此我将发布如何帮助其他人

我在html文件中添加了一个表单id和post方法以及一个隐藏字段。正如Kevin所建议的，我在submit按钮上使用了一个数据绑定，并向ko添加了一个submit函数