title: Saving edited data back to database using django and knockout
body: <p>I am trying to figure out how to save edited data back to the database using django forms and knockout.  The edit.html file has been changed to use knockout to display and edit information on the edit page.  I need to figure out how to change the views.py file to save the information.  The page seems to be behaving how I want it to (I think...), but I don't know how to update the information back to the database once editing has occurred since I am not using django fields in the .html file.</p>
  
  <p>I have read this thread: <a href="https://stackoverflow.com/questions/10403094/using-knockout-js-with-django-forms">using knockout.js with django forms?</a>, but that is using fields in the html file instead of the knockout code.  I'm not opposed to going that route if that is a better method, but was struggling a little with the implementation of that idea when I tried it.</p>
  
  <p>The relevant info from the views.py file:  </p>
  
  <pre><code>@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
  </code></pre>
  
  <p>This is the html file:</p>
  
  <pre><code>{% block pagetitle %}Edit Phone Number: {{ number }}{% endblock %}
  {% block content %}
          &lt;div class="row"&gt;
              &lt;div class="span2"&gt;
                  &lt;div class="pull-right"&gt;Call Type:&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="span6"&gt;
                  &lt;select data-bind="options: callTypes, value: callType"&gt;&lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;!-- ko if: callType() === "Direct" --&gt;
                  &lt;div class="span2"&gt;
                      &lt;div class="pull-right"&gt;Extension:&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span6"&gt;
                      &lt;input type="text" data-bind="value: editExtension" /&gt;
                  &lt;/div&gt;
              &lt;!-- /ko --&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;!-- ko if: callType() === "Sales" --&gt;
                  &lt;div class="span2"&gt;
                      &lt;div class="pull-right"&gt;Customer:&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span6"&gt;
                      &lt;select data-bind="options: customerDisplays, value: selectedCustomer"&gt;&lt;/select&gt;
                  &lt;/div&gt;
              &lt;!-- /ko --&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;!-- ko if: callType() === "Service" --&gt;
                  &lt;div class="span2"&gt;
                      &lt;div class="pull-right"&gt;Service Profile:&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="span6"&gt;
                      &lt;select data-bind="options: servProfiles, value: servProfile"&gt;&lt;/select&gt;
                  &lt;/div&gt;
              &lt;!-- /ko --&gt;
          &lt;/div&gt;
  
          &lt;div class="form-actions"&gt;
              &lt;input type="submit" class='btn btn-primary' value="Update" /&gt;
              &lt;a class="btn" href="{% url phones:available_phones %}"&gt;Cancel&lt;/a&gt;
          &lt;/div&gt;
  {% endblock %}
  
  {% block javascript_compress %}
  &lt;script type='text/javascript' src="{% static 'js/knockout/knockout.js' %}"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(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());
  
      });
  
  &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>Any suggestions?  If I am missing something, please let me know.  Thank you.</p>