具有內部數據綁定的敲除數據綁定 html

Question

這是我的 html 的樣子：

<div class="xyz-template" data-bind="html:myViewModel().htmlTemplate"></div>

我想在 htmlTemplate 本身中進行數據綁定：這是我的淘汰賽：

function myViewModel() {
    self.htmlTemplate = ko.observable();
    self.initialize = function ()
 {
        self.htmlTemplate(`
          <p data-deId="de-box-5" data-bind="html: myViewModel().getDynamicContent()">
            Initial content
          </p>
        `);
 };

self.getDynamicContent = function()
{
   return "dynamic content";
};

};

那么返回值是

Initial content

如何在綁定 html 中進行內部綁定？

Answer 1

整個技巧就是重新綁定您的視圖。 ko不允許在同一節點上兩次調用applyBindings ，因此您需要從綁定中cleanNode節點並將其應用於元素。

這是工作場景：

 function myViewModel() { let self = this self.htmlTemplate = ko.observable(); self.initialize = function () { self.htmlTemplate(` <p data-deId="de-box-5" data-bind="html: myViewModel().getDynamicContent()"> Initial content </p> `); }; self.getDynamicContent = function() { return "dynamic content"; }; return self; }; const vm = myViewModel(); const root = $('.xyz-template'); ko.applyBindings(vm, root[0]); vm.initialize(); const templateHolder = root.find('p'); ko.cleanNode(templateHolder[0]); ko.applyBindings(vm, templateHolder[0]);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div class="xyz-template" data-bind="html: htmlTemplate"></div>

請記住，在您的特定情況下，您無法重新綁定 root，因為每次您初始化綁定html時，來自xyz div的綁定都會啟動，所以再次<p>以某種方式分離

在這里您還將找到解決該問題的更好方法敲除自定義 html 綁定

我發布的代碼只是為了展示這個概念