如何嵌套数据绑定文本

Question

Really simple request, I want to print Product() in an <h4> and Price() in a <small> that exists within the <h4>

<h4 data-bind="text:Product">
    <small data-bind="text:Price"></small>
</h4>

results ignore <small> completely

<h4 data-bind="html:Product() + '<small>' + Price() + '</small>'"></h4>

works, but seems like there should be a better way

https://jsfiddle.net/64wfpgn8/2/

any ideas?

Answer 1

The text binding replaces all contents of the bound tag, so the small is effectively overwritten. You can get the effect you want with a virtual ko tag, though:

<h4><!-- ko text:Product --><!-- /ko --><small data-bind="text:Price"></small></h4>

https://jsfiddle.net/64wfpgn8/3/