Формат строки с нокаутом

Question

В WPF есть привязка, которую я использую много;

<GridViewColumn DisplayMemberBinding="{Binding Path=Price, StringFormat=Now {0:c}!}"/> 

Есть ли хороший способ добиться аналогичной привязки при нокауте? Я использую библиотеку sprintf, которая будет полезна для использования.

Наверное, я могу создать для этого обязательную привязку, но это должен быть довольно распространенный запрос, поэтому я решил проверить здесь, прежде чем пытаться изобрести колесо.

Одним из вариантов использования является создание атрибута href тега a динамически, например. производить что-то вроде этого:

<a href="#products/1/product/2">Foo</a> 

Где 1 является группой продуктов и 2 является идентификатором продукта

Answer 1

Потому что вы хотите форматировать значение для отображения (Ui) и следить за ее изменениями, пользовательские привязки, который вызывает ваша библиотека Sprintf является наиболее подходящим решением, которое предлагает также возможность многократного использования, например:

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; 
     } 
    } 
} 

, где этот обычай связывания требуется объект конфигурации, обладающий следующими свойствами:

• attr: атрибут для обновления (нулевое значение, если текстовое содержимое элемента является обновление)
• format: строка формата
• args: арг формат

Использование:

<a data-bind="sprintf: { attr:'href', 
         format:'#products/%0/product/%1', 
         args: [val1, val2] }"> 
    click 
</a> 
// val1 & val2 are ko observables 

Но вы также можете использовать sprintf непосредственно в пределах data-bind:

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

Демо: JSFiddle