Question

我有这个：

function viewModel() {
        this.items = ko.observableArray(initialData);
    }

ko.applyBindings(viewModel());

......而且这个：

<div data-bind="foreach:  items">
 <span data-bind="text: cutOff($data)"></span>
</div>

问题：我有多列。对于注释列，我需要一个函数，每个项目显示前40个字符的子字符串，并且:( ...）表明文字已被切断。我用计算函数试过这个..没有运气。

我需要这样的东西：

var cutOff= function (fieldName) {
            if (fieldName.Length > 40)
                return fieldName.substring(0, 40) + "(...)"
            else
                return fieldName;
}

正确的语法对我来说仍然是一个谜。这可以吗？谢谢！

Answer 1

更好的方法是创建一个返回文本的cutOff版本的自定义绑定。这样，您就可以在任何需要剪切文本的地方重复使用它。

 ko.bindingHandlers.trimText = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var trimmedText = ko.computed(function () {
            var ActualText = ko.utils.unwrapObservable(valueAccessor());
            var defaultMaxLength = 20;
            var minTrimLength = 5;
            var maxTrimLength = ko.utils.unwrapObservable(allBindingsAccessor().trimLength) || defaultMaxLength;
            if (maxTrimLength < minTrimLength) maxTrimLength = minTrimLength;
            var textOutput = ActualText.length > maxTrimLength ? ActualText.substring(0, maxTrimLength - 1) + '(...)' : ActualText;
            return textOutput;
        });
        ko.applyBindingsToNode(element, { text: trimmedText }, viewModel);
        return { controlsDescendantBindings: true};
    }
};

查看：

<!-- default cutOff length -->
<div data-bind="trimText: ItemText"></div> 
<!-- cutOff length -->
<div data-bind="trimText: ItemText, trimLength: 40"></div>

示例：https://jsfiddle.net/kyr6w2x3/143/

Answer 2

假设cutOff函数是在viewModel中定义的，如下所示。

function viewModel() {
        this.items = ko.observableArray(initialData);

        this.cutOff= function (fieldName) {
            if (fieldName.Length > 40)
                return fieldName.substring(0, 40) + "(...)"
            else
                return fieldName;

         }

    }

您需要通过$parent bindingContext 访问cutOff函数。所以，在HTML页面中，代码应该是这样的。在foreach循环中，span元素的绑定上下文将是单个项目或$data。如果您需要访问ViewModel中定义的函数，则需要更改绑定上下文，$parent允许访问父Context。

<div data-bind="foreach:  items">
 <span data-bind="text: $parent.cutOff($data)"></span>
</div>

更新：它给出未定义错误的原因是因为您没有创建viewModel的实例。如果您没有创建viewModel函数的实例，则调用viewModel（），返回undefined和undefined不包含任何方法，如cutOff。

所以，你需要替换如下所示的代码然后它应该工作。

ko.applyBindings(new viewModel());

淘汰每个项目的呼叫功能

2 个答案: