javascript - KnockoutJS bug 更改 html 绑定(bind)的内容(外部 knockout )会破坏 html 绑定(bind)

Question

相关，但没有解决问题:KnockoutJS: Using 'html' binding, new elements not binding

如果您在元素上有一个 html 绑定(bind)，并在挖空和/或挖空 View 模型之外更改此 html 绑定(bind)的内部 html，您将不再拥有控制权更改原始 html 绑定(bind)。请参阅下面的代码片段

我对保留更改内容的方法(运行原始 javascript/jquery)更感兴趣，并且更愿意理解/修复为什么调用 setdefault()不更新绑定(bind)

任何文档或链接也会有帮助

$(document).ready(function(){
  
  var VIEWMODEL = function(){
  	var _ = this;
    
    _.content = ko.observable("<div>content</div>")
    _.asyncoperation = function(){
    	$("#target")[0].innerHTML = "<div>async operation content</div>";
    }
    _.setdefault = function(){
    	_.content("<div>content</div>");
    }
  };
  var vm = new VIEWMODEL();
  
  ko.applyBindings(vm, $("#container")[0]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="target" data-bind="html: content"></div>
  <br/>
  <br/>
  
  <button data-bind="click: asyncoperation">async operation to replace text</button>
  <button data-bind="click: setdefault">set to default</button>
  
</div>

Answer 1

在 Knockout 中，可观察量通常不会对实际上不改变值的更新使用react。但这可以使用 notify extender 进行更改，如下例所示。

另一方面，如果可能的话，通过 knockout 通常会更好。您可以使用类似 knockout-postbox 的内容来做到这一点。

使用邮箱

_.content = ko.observable("<div>content</div>").subscribeTo("content");
_.asyncoperation = function() {
    ko.postbox.publish("content", "<div>async operation content</div>");
}

http://jsfiddle.net/bLdv296r/

使用通知扩展程序

_.content = ko.observable("<div>content</div>").extend({notify:'always'});

$(document).ready(function(){
  
  var VIEWMODEL = function(){
  	var _ = this;
    
    _.content = ko.observable("<div>content</div>").extend({notify:'always'});
    _.asyncoperation = function(){
    	$("#target")[0].innerHTML = "<div>async operation content</div>";
    }
    _.setdefault = function(){
    	_.content("<div>content</div>");
    }
  };
  var vm = new VIEWMODEL();
  
  ko.applyBindings(vm, $("#container")[0]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="target" data-bind="html: content"></div>
  <br/>
  <br/>
  
  <button data-bind="click: asyncoperation">async operation to replace text</button>
  <button data-bind="click: setdefault">set to default</button>
  
</div>