Question

所以我有一个奇怪的问题。我正在用一个ko foreach迭代：我有2＆＃34;如果＆＃34;声明。

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

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

**Enabled**

//empty

**Disabled**

thing1      

thing 2

thing 3

这很好。它按预期工作......除了一件小事。 ifNot有一个我需要另一个插件的div。这会导致意想不到的副作用。＆＃34; Html在行启用时显示＆＃34;仍然存在，只是缺少一些儿童元素。

 <!--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。我正在尝试这样的事情，而且我已经看过模板：绑定，但我无法弄清楚如何使用它。

请，如果您可以为新手打好模板绑定，或者弄清楚如何绑定我拥有的内容，或者修改下面的内容以动态添加和删除dom中的html，那就太棒了。

P.S.No jQuery

self.template = ko.observable();

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

Answer 1

模板绑定的简单示例，希望这有帮助

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

动态呈现和删除HTML knockoutjs

1 个答案: