为什么修改后的元素没有显示？

Question

我正在使用Knockout和jQuery来尝试添加一个新的模板到一个模式。我已经添加了一个将模板添加到模态onclick的函数，它显示模板被正确地添加到页面，但是模板没有呈现到页面。我不明白在这种情况下我做错了什么，是不是因为它是一个模板而没有渲染，有没有更好的方法用'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());

Answer 1

我猜，一旦新的绑定被附加到您的模态元素中，您仍然需要让knockout意识到它们。尝试在弹出功能的末尾添加一个"applyBindingsToNode“。

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]);
}