【问题标题】:Is there any way to pluralize some text using knockoutjs有没有办法使用 knockoutjs 使某些文本复数
【发布时间】:2012-02-06 17:33:55
【问题描述】:

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

【问题讨论】:

    标签: javascript knockout.js


    【解决方案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' =&gt; "No items", 'singular' =&gt; "1 item", 'plural' =&gt; "## items" 之类的选项
    • 好主意。这就是 Angular 所做的。
    猜你喜欢
    • 2019-03-31
    • 1970-01-01
    • 2020-03-25
    • 1970-01-01
    • 2014-01-30
    • 2015-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多