Fix JS data binding

Author: woile

rest_framework/static/rest_framework/docs/js/api.js

@@ -2,6 +2,14 @@ var responseDisplay = 'data'
 var coreapi = window.coreapi
 var schema = window.schema
 
+function normalizeKeys (arr) {
+  var _normarr = [];
+  for (var i = 0; i < arr.length; i++) {
+    _normarr = _normarr.concat(arr[i].split(' > '));
+  }
+  return _normarr;
+}
+
 function normalizeHTTPHeader (str) {
   // Capitalize HTTP headers for display.
   return (str.charAt(0).toUpperCase() + str.substring(1))
@@ -94,7 +102,7 @@ $(function () {
     var $requestAwaiting = $form.find('.request-awaiting')
     var $responseRaw = $form.find('.response-raw')
     var $responseData = $form.find('.response-data')
-    var key = $form.data('key')
+    var key = normalizeKeys($form.data('key'))
     var params = {}
     var entries = formEntries($form.get()[0])
 
@@ -212,7 +220,6 @@ $(function () {
     }
 
     var client = new coreapi.Client(options)
-
     client.action(schema, key, params).then(function (data) {
       var response = JSON.stringify(data, null, 2)
       $requestAwaiting.addClass('hide')

rest_framework/templates/rest_framework/docs/interact.html

@@ -1,7 +1,7 @@
 {% load rest_framework %}
 
 <!-- Modal -->
-<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
+<div class="modal fade api-modal" id="{{ section_key }}_{{ link_key|slugify }}_modal" tabindex="-1" role="dialog" aria-labelledby="api explorer modal">
 <div class="modal-dialog modal-lg" role="document">
   <div class="modal-content">
     <div class="modal-header">

rest_framework/templates/rest_framework/docs/link.html

@@ -6,11 +6,11 @@
         class="btn btn-sm btn-success"
         style="float: right; margin-top: 20px"
         data-toggle="modal"
-        data-target="#{{ section_key }}_{{ link_key }}_modal">
+        data-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
         <i class="fa fa-exchange"></i> Interact
     </button>
 
-    <h3 id="{{ section_key }}-{{ link_key }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key }}"><i class="fa fa-link" aria-hidden="true"></i>
+    <h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key|slugify }}"><i class="fa fa-link" aria-hidden="true"></i>
 </a></h3>
 
     <div class="meta">

rest_framework/templates/rest_framework/docs/sidebar.html

@@ -11,7 +11,7 @@ <h3 class="brand"><a href="#">{{ document.title }}</a></h3>
                 <a><i class="fa fa-dot-circle-o fa-lg"></i> {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
                 <ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
                 {% for link_key, link in section|schema_links|items %}
-                    <li><a href="#{{ section_key }}-{{ link_key }}">{{ link.title|default:link_key }}</a></li>
+                    <li><a href="#{{ section_key }}-{{ link_key|slugify }}">{{ link.title|default:link_key }}</a></li>
                 {% endfor %}
                 </ul>
             </li>