动态渲染和删除HTML knockoutjs

Dynamically render and remove HTML knockoutjs

本文关键字：HTML knockoutjs 删除 动态      更新时间：2023-09-26

所以我有一个奇怪的问题。我正在迭代一个ko foreach:，我有两个"if"语句。

ifnot: row.disabled
 //this html
if: row.disabled
 //that html

所有行在页面加载时禁用。我的页面的格式是这样的

**Enabled**
//empty
**Disabled**
thing1      
thing 2
thing 3

这很好。它像预期的那样工作……除了一件小事。ifNot有一个div，我需要另一个插件。这会产生意想不到的副作用。"启用行时显示的Html"仍然在那里，只是缺少了一些子元素。

 <!--ko foreach blah in thing-->
 <div class="i need this to be here">
 <!--ko ifnot: row.disabled-->
    html to display when row is enabled
 <!--/ko-->
 </div>
 <!--/ko-->

副作用是，当我getElementById，然后querySelectorAll(html显示…)它得到所有的行，当，对于这个用例，行不能在那里，如果他们被禁用。

我需要在行状态发生变化时动态呈现或从页面中删除此html。我正在尝试这样的东西，我已经看到了模板:绑定，但我不知道如何使用它。

请，如果你能外行的模板绑定为新手，或弄清楚如何绑定什么我有，或修改我有什么下面添加和删除html从dom动态，那将是美妙的。

注:没有jQuery 

self.template = ko.observable();
    self.toggleTemplate = function (row) {
        var template = ko.observable();
        if (!row.disabled) {
            self.template(enabledRowTemplate);
        }
        else {
            self.template(null);
        }
    };

模板绑定的简单例子，希望对大家有所帮助

<!--ko foreach blah in thing-->
<div class="i need this to be here">
    <!-- ko template: template --><!-- /ko -->
 </div>
<!--/ko-->
<script type="text/html" id="enabledRowTemplate">
  html to display when row is enabled
</script>
<script type="text/html" id="disabledRowTemplate">
  html to display when row is disabled
</script>

和JS中的

self.template = ko.computedObservable(function(){
   return self.enabled ? 'enabledRowTemplate' : 'disabledRowTemplate' // or {name: templateName, data: templateData} instead of template name string 
});
相关文章：