将数据绑定参数传递给函数淘汰

Passing data bind parameter to a function knockout

本文关键字：函数 淘汰 参数传递 数据绑定      更新时间：2023-09-26

我想格式化价格并以正确的格式打印。例如，5000000 将显示为 $5,000,000。谁能告诉我怎么做？

<span data-bind="text:Price"></span>
<span data-bind="function()"></span>

我可以编写一个内联函数来获取值并格式化它吗？文本：价格的值可以传递给formatfunction（）吗？

formatfunction(label){return  '$' + label.value.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",");

关于 Knockout 的一个聪明之处在于绑定是代码片段，因此您可以在其中使用表达式。所以你可以调用一个函数：

<span data-bind="text:formatfunction(Price)"></span>

只是，作为一项规则，尽量不要让表达式变得非常复杂。复杂表达式属于视图模型。

您可以使用挖空计算变量，请参阅挖空中的示例。

您可以使用

下面的示例。

(function() {
    function refresh(element, valueAccessor) {
        var val = ko.utils.unwrapObservable(valueAccessor());
        var text =  '$' + val.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",");
        $(element).text(text);
    }
    ko.bindingHandlers.priceText = {
        init: refresh,
        update: refresh
    }
})();

<span data-bind="priceText:Price"></span>

这将使模型与特定于 UI 的"格式"计算保持干净，从而使其更可重用。此外，您可以将价格可观察添加到您想要的任何模型中，而无需每次都添加计算。

function ViewModel() {
var self=this;
self.formatfunction=function(label){
                    console.log(label);
                    return  '$' + label.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",");
};
ko.applyBindings(new ViewModel());
<span data-bind="text:$parent.formatfunction(Price)"></span>

相关文章：