Make thread view with subview work

lms/static/coffee/src/discussion/views/discussion_thread_show_view.coffee

+class @DiscussionThreadShowView extends DiscussionContentView
+
+  events:
+    "click .discussion-vote": "toggleVote"
+    "click .action-follow": "toggleFollowing"
+    "click .action-edit": "edit"
+    "click .action-delete": "delete"
+    "click .action-openclose": "toggleClosed"
+
+  template: _.template($("#thread-show-template").html())
+
+  $: (selector) ->
+    @$el.find(selector)
+
+  initialize: ->
+    super()
+    @model.on "change", @updateModelDetails
+
+  render: ->
+    @$el.html(@template(@model.toJSON()))
+    @delegateEvents()
+    @renderDogear()
+    @renderVoted()
+    @renderAttrs()
+    @$("span.timeago").timeago()
+    @convertMath()
+    @highlight @$(".post-body")
+    @highlight @$("h1")
+    @
+
+  renderDogear: ->
+    if window.user.following(@model)
+      @$(".dogear").addClass("is-followed")
+
+  renderVoted: =>
+    if window.user.voted(@model)
+      @$("[data-role=discussion-vote]").addClass("is-cast")
+    else
+      @$("[data-role=discussion-vote]").removeClass("is-cast")
+
+  updateModelDetails: =>
+    @renderVoted()
+    @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"])
+
+  convertMath: ->
+    element = @$(".post-body")
+    element.html DiscussionUtil.postMathJaxProcessor(element.html())
+    MathJax.Hub.Queue ["Typeset", MathJax.Hub, element[0]]
+
+  toggleVote: (event) ->
+    event.preventDefault()
+    if window.user.voted(@model)
+      @unvote()
+    else
+      @vote()
+
+  toggleFollowing: (event) ->
+    $elem = $(event.target)
+    url = null
+    console.log "follow"
+    if not @model.get('subscribed')
+      @model.follow()
+      url = @model.urlFor("follow")
+    else
+      @model.unfollow()
+      url = @model.urlFor("unfollow")
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      type: "POST"
+
+  vote: ->
+    window.user.vote(@model)
+    url = @model.urlFor("upvote")
+    DiscussionUtil.safeAjax
+      $elem: @$(".discussion-vote")
+      url: url
+      type: "POST"
+      success: (response, textStatus) =>
+        if textStatus == 'success'
+          @model.set(response, {silent: true})
+
+  unvote: ->
+    window.user.unvote(@model)
+    url = @model.urlFor("unvote")
+    DiscussionUtil.safeAjax
+      $elem: @$(".discussion-vote")
+      url: url
+      type: "POST"
+      success: (response, textStatus) =>
+        if textStatus == 'success'
+          @model.set(response, {silent: true})
+
+  submitComment: (event) ->
+    event.preventDefault()
+    url = @model.urlFor('reply')
+    body = @getWmdContent("reply-body")
+    return if not body.trim().length
+    @setWmdContent("reply-body", "")
+    comment = new Comment(body: body, created_at: (new Date()).toISOString(), username: window.user.get("username"), votes: { up_count: 0 }, endorsed: false, user_id: window.user.get("id"))
+    comment.set('thread', @model.get('thread'))
+    @renderResponse(comment)
+    @model.addComment()
+
+    DiscussionUtil.safeAjax
+      $elem: $(event.target)
+      url: url
+      type: "POST"
+      dataType: 'json'
+      data:
+        body: body
+      success: (data, textStatus) =>
+        comment.updateInfo(data.annotated_content_info)
+        comment.set(data.content)
+
+  edit: ->
+    @trigger "thread:edit"
+    window.showView = @
+
+  delete: (event) ->
+    @trigger "thread:delete"
+
+  toggleClosed: (event) ->
+    $elem = $(event.target)
+    url = @model.urlFor('close')
+    closed = @model.get('closed')
+    data = { closed: not closed }
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      data: data
+      type: "POST"
+      success: (response, textStatus) =>
+        @model.set('closed', not closed)
+        @model.set('ability', response.ability)
+
+  toggleEndorse: (event) ->
+    $elem = $(event.target)
+    url = @model.urlFor('endorse')
+    endorsed = @model.get('endorsed')
+    data = { endorsed: not endorsed }
+    DiscussionUtil.safeAjax
+      $elem: $elem
+      url: url
+      data: data
+      type: "POST"
+      success: (response, textStatus) =>
+        @model.set('endorsed', not endorsed)
+
+  highlight: (el) ->
+    el.html(el.html().replace(/&lt;mark&gt;/g, "<mark>").replace(/&lt;\/mark&gt;/g, "</mark>"))

lms/static/coffee/src/discussion/views/discussion_thread_view.coffee

 class @DiscussionThreadView extends DiscussionContentView
 
   events:
-    "click .discussion-vote": "toggleVote"
-    "click .action-follow": "toggleFollowing"
     "click .discussion-submit-post": "submitComment"
-    "click .action-edit": "edit"
-    "click .action-delete": "delete"
-    "click .action-openclose": "toggleClosed"
 
   template: _.template($("#thread-template").html())
 
-  initLocal: ->
-    @$local = @$el.children(".discussion-article").children(".local")
-    @$delegateElement = @$local
+  $: (selector) ->
+    @$el.find(selector)
 
   initialize: ->
     super()
-    @model.on "change", @updateModelDetails
+    @showView = new DiscussionThreadShowView(model: @model)
+    @showView.bind "thread:delete", @delete
+    @showView.bind "thread:edit", @edit
 
   render: ->
     @$el.html(@template(@model.toJSON()))
-    @initLocal()
     @delegateEvents()
-    @renderDogear()
-    @renderVoted()
+
+    @showView.setElement(@$('.thread-content-wrapper'))
+    @showView.render()
+    @showView.delegateEvents()
+
     @renderAttrs()
     @$("span.timeago").timeago()
     @makeWmdEditor "reply-body"
-    @convertMath()
     @renderResponses()
-    @highlight @$(".post-body")
-    @highlight @$("h1")
     @
 
-  renderDogear: ->
-    if window.user.following(@model)
-      @$(".dogear").addClass("is-followed")
-
-  renderVoted: =>
-    if window.user.voted(@model)
-      @$("[data-role=discussion-vote]").addClass("is-cast")
-    else
-      @$("[data-role=discussion-vote]").removeClass("is-cast")
-
-  updateModelDetails: =>
-    @renderVoted()
-    @$("[data-role=discussion-vote] .votes-count-number").html(@model.get("votes")["up_count"])
-
-  convertMath: ->
-    element = @$(".post-body")
-    element.html DiscussionUtil.postMathJaxProcessor DiscussionUtil.markdownWithHighlight element.html()
-    MathJax.Hub.Queue ["Typeset", MathJax.Hub, element[0]]
-
   renderResponses: ->
     DiscussionUtil.safeAjax
       url: "/courses/#{$$course_id}/discussion/forum/#{@model.get('commentable_id')}/threads/#{@model.id}"
@@ -77,50 +53,6 @@ class @DiscussionThreadView extends DiscussionContentView
     is_endorsed = @$el.find(".is-endorsed").length
     @model.set 'endorsed', is_endorsed
 
-  toggleVote: (event) ->
-    event.preventDefault()
-    if window.user.voted(@model)
-      @unvote()
-    else
-      @vote()
-
-  toggleFollowing: (event) ->
-    $elem = $(event.target)
-    url = null
-    console.log "follow"
-    if not @model.get('subscribed')
-      @model.follow()
-      url = @model.urlFor("follow")
-    else
-      @model.unfollow()
-      url = @model.urlFor("unfollow")
-    DiscussionUtil.safeAjax
-      $elem: $elem
-      url: url
-      type: "POST"
-
-  vote: ->
-    window.user.vote(@model)
-    url = @model.urlFor("upvote")
-    DiscussionUtil.safeAjax
-      $elem: @$(".discussion-vote")
-      url: url
-      type: "POST"
-      success: (response, textStatus) =>
-        if textStatus == 'success'
-          @model.set(response, {silent: true})
-
-  unvote: ->
-    window.user.unvote(@model)
-    url = @model.urlFor("unvote")
-    DiscussionUtil.safeAjax
-      $elem: @$(".discussion-vote")
-      url: url
-      type: "POST"
-      success: (response, textStatus) =>
-        if textStatus == 'success'
-          @model.set(response, {silent: true})
-
   submitComment: (event) ->
     event.preventDefault()
     url = @model.urlFor('reply')
@@ -145,7 +77,6 @@ class @DiscussionThreadView extends DiscussionContentView
 
   edit: ->
 
-
   delete: (event) ->
     url = @model.urlFor('delete')
     if not @model.can('can_delete')
@@ -160,33 +91,3 @@ class @DiscussionThreadView extends DiscussionContentView
       url: url
       type: "POST"
       success: (response, textStatus) =>
-
-  toggleClosed: (event) ->
-    $elem = $(event.target)
-    url = @model.urlFor('close')
-    closed = @model.get('closed')
-    data = { closed: not closed }
-    DiscussionUtil.safeAjax
-      $elem: $elem
-      url: url
-      data: data
-      type: "POST"
-      success: (response, textStatus) =>
-        @model.set('closed', not closed)
-        @model.set('ability', response.ability)
-
-  toggleEndorse: (event) ->
-    $elem = $(event.target)
-    url = @model.urlFor('endorse')
-    endorsed = @model.get('endorsed')
-    data = { endorsed: not endorsed }
-    DiscussionUtil.safeAjax
-      $elem: $elem
-      url: url
-      data: data
-      type: "POST"
-      success: (response, textStatus) =>
-        @model.set('endorsed', not endorsed)
-
-  highlight: (el) ->
-    el.html(el.html().replace(/&lt;mark&gt;/g, "<mark>").replace(/&lt;\/mark&gt;/g, "</mark>"))

lms/templates/discussion/_underscore_templates.html

 <script type="text/template" id="thread-template">
     <article class="discussion-article" data-id="${'<%- id %>'}">
-        <div class="local"><a href="javascript:void(0)" class="dogear action-follow"></a></div>
-        <div class="discussion-post local">
-            <header>
-                <a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote"><span class="plus-icon">+</span> <span class='votes-count-number'>${'<%- votes["up_count"] %>'}</span></a>
-                <h1>${'<%- title %>'}</h1>
-                <p class="posted-details">
-                    <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by
-                    <a href="${'<%- user_url %>'}">${'<%- username %>'}</a>
-                    <span class="post-status-closed top-post-status" style="display: none">
-                      &bull; This thread is closed.
-                    </span>
-                </p>
-            </header>
-
-            <div class="post-body">
-                ${'<%- body %>'}
-            </div>
-            ${'<% if (obj.courseware_location) { %>'}
-            <div class="post-context">
-                (this post is about <a href="../../jump_to/${'<%- courseware_location %>'}">${'<%- courseware_title %>'}</a>)
-            </div>
-            ${'<% } %>'}
-
-            <ul class="moderator-actions">
-                <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
-                <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
-                <li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> Close</a></li>
-            </ul>
-        </div>
+        <div class="thread-content-wrapper"></div>
         <ol class="responses">
             <li class="loading"><div class="loading-animation"></div></li>
         </ol>
-        <div class="local post-status-closed bottom-post-status" style="display: none">
+        <div class="post-status-closed bottom-post-status" style="display: none">
           This thread is closed.
         </div>
-        <form class="local discussion-reply-new" data-id="${'<%- id %>'}">
+        <form class="discussion-reply-new" data-id="${'<%- id %>'}">
             <h4>Post a response:</h4>
             <ul class="discussion-errors"></ul>
             <div class="reply-body" data-id="${'<%- id %>'}"></div>
@@ -46,6 +18,38 @@
     </article>
 </script>
 
+<script type="text/template" id="thread-show-template">
+  <div class="discussion-post">
+      <div><a href="javascript:void(0)" class="dogear action-follow"></a></div>
+      <header>
+          <a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote"><span class="plus-icon">+</span> <span class='votes-count-number'>${'<%- votes["up_count"] %>'}</span></a>
+          <h1>${'<%- title %>'}</h1>
+          <p class="posted-details">
+              <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by
+              <a href="${'<%- user_url %>'}">${'<%- username %>'}</a>
+              <span class="post-status-closed top-post-status" style="display: none">
+                &bull; This thread is closed.
+              </span>
+          </p>
+      </header>
+
+      <div class="post-body">
+          ${'<%- body %>'}
+      </div>
+      ${'<% if (obj.courseware_location) { %>'}
+      <div class="post-context">
+          (this post is about <a href="../../jump_to/${'<%- courseware_location %>'}">${'<%- courseware_title %>'}</a>)
+      </div>
+      ${'<% } %>'}
+
+      <ul class="moderator-actions">
+          <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
+          <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> Delete</a></li>
+          <li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> Close</a></li>
+      </ul>
+  </div>
+</script>
+
 <script type="text/template" id="thread-response-template">
     <header class="response-local">
         <a href="javascript:void(0)" class="vote-btn" data-tooltip="vote"><span class="plus-icon"></span><span class="votes-count-number">${"<%- votes['up_count'] %>"}</span></a>