1

djangoフォームとノックアウトを使用して、編集したデータをデータベースに保存する方法を見つけようとしています。edit.html ファイルは、編集ページでの情報の表示と編集にノックアウトを使用するように変更されました。情報を保存するには、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 %}

助言がありますか?何か不足している場合は、お知らせください。ありがとうございました。

4

2 に答える 2