如何将动态 HTML 与淘汰赛绑定答案

【问题标题】：How to bind dynamic HTML with knockout如何将动态 HTML 与淘汰赛绑定
【发布时间】：2017-08-18 04:36:53
【问题描述】：

我有几个 HTML 页面，我将它们转换成块 HTML，以便将它们注入我的主容器中。但是，我必须使用淘汰赛绑定，因为ko.applyBindings (viewModel)。

如果我使用 jQuery $('container').html(...) 进行更改，是否不再起作用？

这是我的代码：

var viewModel = {
    appView: {
        Html: ko.observableArray()
    }
}


 this.loadHtmlToPage = function (htmlblock) {
    var contentPage = function (status) {
        this.chain = ko.observable(status);
    }

    viewModel.appView.Html.push(new contentPage(htmlblock));
 }


<div id="container" data-bind="html: chain"></div>

【问题讨论】：

你不应该使用 jQuery 来操作 DOM。您应该为链分配新值，它包含将出现在div#container 中的 html。你对chain 所做的事情对我来说没有意义，我不明白appView.Html 应该如何融入该计划。
这是因为我的应用程序中只需要一个modelView，并且我用dataView、securityView、appView等子对象包装它们。它工作得很好，但我无法通过 html 绑定来解决......
您希望在 HTML 中使用 Knockout 绑定吗？

标签： javascript knockout.js data-binding

【解决方案1】：

对我来说显而易见的一件事是，每次分配给它时，您都将chain 设置为一个新的observable。要提供可观察的新内容，请将它们作为参数传递。

在您的 viewModel 中声明 chain，然后执行 this.chain(status) 以更改其内容。这些内容将成为您 div#container 中的新 HTML。

var viewModel = {
  appView: {
    Html: ko.observableArray()
  },
  chain: ko.observable()
}

this.loadHtmlToPage = function(htmlblock) {
  var contentPage = function(status) {
    this.chain(status);
  }

  viewModel.appView.Html.push(new contentPage(htmlblock));
}

【讨论】：

【解决方案2】：

ko.cleanNode($("#conteneur")[0]);
$("#conteneur").html('chaine');
ko.applyBindings(viewModel, $("#conteneur")[0]);

【讨论】：

来自评论：此答案被标记为低质量。虽然答案总是很受欢迎，但它确实有助于提供一些关于您的代码如何解决手头问题的信息。不是每个人都熟悉您的确切编码逻辑，但可能了解您的一般方法或概念。为了帮助改进您的答案，请提供一些context surrounding it，并查看writing great answers 上的帮助文章以获取有关如何使您的答案重要的一些提示：)
cleanNode 是wrong way 做事。请参阅the template binding。