JSFiddle - React, Tailwind, and code Playground

HTML

group id:<input type="text" data-bind="value: val1"/><br/>
product id:<input type="text" data-bind="value: val2"/><br/>

<h3>With custom binding:</h3>
<a data-bind="sprintf: {attr:'href', format:'#products/%0/product/%1', args: [val1, val2] }">click</a>
<div data-bind="sprintf: {format:'#products/%0/product/%1', args: [val1, val2] }"></div>

<h3>Without custom binding:</h3>
<a data-bind="attr: { href: sprintf('#products/%0/product/%1', [val1(), val2()]) }">click</a>
<div data-bind="text: sprintf('#products/%0/product/%1', [val1(), val2()])"></div>

JavaScript

// sprintf mock
function sprintf(format, args) {
    for(var i=0;i<args.length;i++) {
        format = format.replace('%'+i, args[i]);
    }
    return format;
}

ko.bindingHandlers.sprintf = {
    update: function(element, valueAccessor) {
        var options = valueAccessor();
        var formatted = sprintf(ko.unwrap(options.format), 
                                ko.unwrap(options.args).map(function(arg) {
                                    return ko.unwrap(arg);
                                }));
        if(options.attr) {
            element.setAttribute(options.attr, formatted);
        } else {
            element.textContent = formatted;
        }
    }
};
            
var vm = {
    val1: ko.observable(),
    val2: ko.observable()
};

ko.applyBindings(vm);