KnockoutJS bug 更改 html 绑定的内容（外部淘汰）会破坏 html 绑定

Question

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

如果您有一个元素上的html 绑定，并在剔除和/或剔除视图模型之外更改此html 绑定的内部html，您将无法再控制更改原始html 绑定。请看下面的sn-p

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

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

$(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 中，可观察对象通常不会对实际上不会更改值的更新做出反应。但这可以使用notify extender 进行更改，如下例所示。

另一方面，如果可能，通常最好通过淘汰赛。您可以使用 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>

Answer 2

这样的东西会起作用吗？在模型定义之外的 onclick 事件上更新模型。您仍在更新可观察但在模型定义之外。

这是一个小提琴http://jsfiddle.net/LkqTU/32527/

  $(document).ready(function() {
          ko.applyBindings(mymodel);
          $('#asyncoperation').click(function() {
              mymodel.content("<div>async operation content</div>");
              });

          });