有没有办法使用 knockoutjs 使某些文本复数

Posted 2023-02-22

【中文标题】有没有办法使用 knockoutjs 使某些文本复数

【英文标题】：Is there any way to pluralize some text using knockoutjs

【发布时间】：2012-02-06 17:33:55

【问题描述】：

文本数据绑定表达式只能有一个属性。我如何根据另一个属性的计数来复数一些文本？

【参考方案1】：

有几种方法可以做到这一点。我在这里展示了两种方法：http://jsfiddle.net/njj2P/2/

我展示的第一个选项是使用 ko.computed 根据评估来确定名称应该以单数还是复数形式返回。

  this.formattedName = ko.computed(function() 
        return this.qty() > 1 ? this.name() + "s" : this.name();
    , this);

第二个选项展示了如何在没有计算属性的情况下执行此操作，而是使用条件绑定。

<span data-bind="if:qty()>1">s</span>

【讨论】：

我真的在寻找一种干净的方法来做“y”到“ies”或“x”到“ces”等。这部分是一种简单的部分。无论如何我都投了赞成票，但这并不是我想要的。有任何想法吗？有什么吗？

我赞成这个答案，因为我在其中使用了第二个选项，稍微更改为 != 而不是 > 以便零值显示 s（即 O 子项，1 个子项, 2 个子项）

我同意并对我的代码进行了同样的观察和更改。

【参考方案2】：

您可以创建一个可重复使用的自定义绑定，如下所示。

ko.bindingHandlers.pluralize = 
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    function count(data) 
        var value = ko.utils.unwrapObservable(data);
        if (typeof value === "object" && value.length > 0) 
            return value.length;
         else if (typeof value === "number") 
            return value;
        
    

    var settings = valueAccessor();
    var text = count(settings.data) === 1 ? settings.singular : settings.plural;
    $(element).text(ko.utils.unwrapObservable(text));
  
;

你会这样使用它。

<span data-bind="pluralize:  data:items, singular:'entry', plural:'entries' "></span>

data 选项可以指向任何数组或数字。 singular 选项表示当 data 计算结果为 1 时要显示的文本 plural 选项表示将以其他方式显示的文本。

在这里查看它的实际应用。 http://fiddle.jshell.net/jessegavin/wamfw/

【讨论】：

其实我很喜欢这个解决方案。

很好的答案！我建议添加一个“无”选项和对count 的反向引用，以便开发人员可以获得诸如'none' => "No items", 'singular' => "1 item", 'plural' => "## items" 之类的选项

好主意。这就是 Angular 所做的。