Knockout字符串格式模式

时间:2014-10-16 10:13:55

标签: javascript knockout.js binding custom-binding

在WPF中有一个我经常使用的绑定;

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

有没有一种好方法可以在淘汰赛中实现类似的绑定?我正在使用一个很好用的sprintf库。

我想我可以为此创建一个自定义绑定,但这应该是一个相当常见的请求所以我想在尝试重新发明轮子之前我会检查这里。

一个用例是动态构建href标记的a属性,例如产生这样的东西:

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

其中1是产品组,2是产品的ID

1 个答案:

答案 0 :(得分:5)

因为要格式化display(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:要更新的属性(如果要更新元素的文本内容,则为null)
  • format:字符串格式
  • args: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