Q:

Why is the amended element not showing? 

I am using Knockout and jQuery to try and add a new template to a modal.  I have added a function that adds the template to the modal onclick, and it shows it being added to the page correctly, but the template is not rendering to the page.  I don't understand what I am doing wrong in this case, is it not rendering because it is a template, is there a better way to do it with a 'click:' ? 
HTML
    
        
        
        
        
        
    
    <div id="myModal" class="modal">
    </div>

    <script type="text/html" id="person-template">
        <div class = "col-md-4 col-sm-6 col-xs-12">
            <div class = "portfolio">
                    <img class="img-responsive rounded" data-bind="attr: {src : src}">
                    <div class= "over-text" data-bind="text: name"></div>
            </div>
        </div>
    </script>

    <script type="text/html" id="modal">
            <div class="modal-content">
                <span class="close" onclick= "closeModal()">&times;</span>
                <img class="img-responsive rounded imgModal" data-bind="attr: {src : src}">
                <h3 data-bind="text:name"></h3>
                <p data-bind="text:des"></p>
                <a data-bind="attr: {href: url}">View on GitHub</a>
            </div>
    </script>

JS
var modal = document.getElementById('myModal');
var span = document.getElementsByClassName(".close");

function closeModal(){
  modal.style.display = "none";
  while (modal.firstChild) {
    modal.removeChild(modal.firstChild);
  }

}

window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
      while (modal.firstChild) {
        modal.removeChild(modal.firstChild);
      }
    }
}

function finalPopup(popup){
  var projects = ["memory", "arcade", "pixel", "feed", "map"];
  console.log(projects[popup]);
  var elem = $("<div class=\'innerModal\' data-bind=\"template: { name: \'modal\', data: "+projects[popup]+"}\"></div>");
  $("#myModal").append(elem);
  modal.style.display = "block";
}

function MyViewModel() {
         this.memory = { name: 'Memory', url: ko.observable("https://github.com/jtvkw2/Memory"), src: ko.observable("img/Memory.png"), des: "Built a complete browser-based card matching game (also known as Concentration).  But this isn’t just any memory game!  It’s a shnazzy, well-designed, feature-packed memory game!"}; 
         this.arcade = { name: 'Bug Boy in Water World', url: ko.observable("https://github.com/jtvkw2/Bug_Boy_in_Water_World"), src: ko.observable("img/Arcade.png"), des: "An HTML5 Canvas powered video game, developed using the best practices in Object Oriented JavaScript."}; 
         this.pixel = { name: 'Pixel Maker', url: ko.observable("https://github.com/jtvkw2/Pixel"), src: ko.observable("img/Pixel.png"), des: "Created a single-page app in JavaScript where the user can create artistic designs!" }; 
         this.feed = { name: 'Feed Reader', url: ko.observable("https://github.com/jtvkw2/Feed-Reader"), src: ko.observable("img/Feed.png"), des: "Wrote comprehensive unit tests, using the Jasmine testing framework, for an RSS Feed Reader application that uses Google's RSS API." }; 
         this.map = { name: 'Google Maps Demo', url: ko.observable("https://github.com/jtvkw2/Map"), src: ko.observable("img/Map.png"), des: "A single-page web application, built using the Knockout framework, that displays a Google Map of an area and various points of interest.  Users can search all included landmarks and, when selected, additional information about a landmark is presented from the FourSquare and Wikipedia APIs." }; 
}
ko.applyBindings(new MyViewModel());

A:

I'm guessing you still need to make knockout aware of the new bindings once they're appended to your modal element.  Try adding an "applyBindingsToNode" at the end of the popup function. 
function finalPopup(popup){
  var projects = ["memory", "arcade", "pixel", "feed", "map"];
  console.log(projects[popup]);
  var elem = $("<div class=\'innerModal\' data-bind=\"template: { name: \'modal\', data: "+projects[popup]+"}\"></div>");
  $("#myModal").append(elem);
  modal.style.display = "block";

  ko.applyBindingsToNode(elem[0]);
}

