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

jaf*_*ffa 7 javascript knockout.js

文本数据绑定表达式只能有一个属性.我如何根据另一个属性的数量复数一些文本?

Joh*_*apa 14

有几种方法可以做到这一点.我在这里展示的小提琴中演示了两种方式:http://jsfiddle.net/njj2P/2/

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

  this.formattedName = ko.computed(function() {
        return this.qty() > 1 ? this.name() + "s" : this.name();
    }, this);
Run Code Online (Sandbox Code Playgroud)

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

<span data-bind="if:qty()>1">s</span>
Run Code Online (Sandbox Code Playgroud)


jes*_*vin 12

您可以创建可重复使用的自定义绑定,如下所示.

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));
  }
};
Run Code Online (Sandbox Code Playgroud)

你会像这样使用它.

<span data-bind="pluralize: { data:items, singular:'entry', plural:'entries' }"></span>
Run Code Online (Sandbox Code Playgroud)
  • data选项可以指向任何数组或数字.
  • singular如果data计算结果为1,则该选项表示要显示的文本
  • plural选项表示将以其他方式显示的文本.

在这里看到它. http://fiddle.jshell.net/jessegavin/wamfw/

  • 很棒的答案!我建议添加一个'none'选项和一个对`count`的反向引用,这样开发人员就可以得到诸如`'none'=>"No items","singular"=>"1 item",'复数'=>"## items"` (2认同)