在Knockout JS中检查并拆分跟踪号字符串的可行性咨询

这个需求完全可以实现，以下是基于Knockout JS的具体实现方式：

核心逻辑实现 #

建议在你的Row ViewModel中添加一个计算属性来处理追踪号的拆分与承运商判断逻辑，这样能充分利用Knockout的响应式特性，当current_tracking的值变化时自动更新结果：

function RowViewModel(data) {
    var self = this;
    // 原始追踪号 observable
    self.current_tracking = ko.observable(data.current_tracking || '');

    // 处理追踪号的计算属性
    self.trackingInfo = ko.computed(function() {
        var rawTracking = self.current_tracking().trim();
        if (!rawTracking) {
            return { hasTwoTrackings: false, trackings: [] };
        }

        // 拆分单号并去除每个单号的前后空格
        var trackingNumbers = rawTracking.split(',').map(num => num.trim());
        const result = {
            hasTwoTrackings: trackingNumbers.length === 2,
            trackings: []
        };

        // 处理单个单号的情况
        if (trackingNumbers.length === 1) {
            const num = trackingNumbers[0];
            result.trackings.push({
                number: num,
                carrier: num.length > 9 ? 'DHL' : 'UPS'
            });
        } 
        // 处理两个单号的情况
        else if (trackingNumbers.length === 2) {
            result.strNo1 = trackingNumbers[0];
            result.strNo2 = trackingNumbers[1];
            
            trackingNumbers.forEach(num => {
                result.trackings.push({
                    number: num,
                    carrier: num.length > 9 ? 'DHL' : 'UPS'
                });
            });
        }

        return result;
    });
}

HTML绑定示例 #

在页面中通过data-bind直接使用计算属性返回的结果，实现不同场景的渲染：

<div data-bind="with: $row().trackingInfo">
    <!-- 单个追踪号的展示 -->
    <div data-bind="visible: !hasTwoTrackings()">
        <p>
            追踪号：<span data-bind="text: trackings[0].number"></span>
            承运商：<span data-bind="text: trackings[0].carrier"></span>
        </p>
    </div>

    <!-- 两个追踪号的展示 -->
    <div data-bind="visible: hasTwoTrackings()">
        <p>
            追踪号1：<span data-bind="text: strNo1"></span>
            承运商：<span data-bind="text: trackings[0].carrier"></span>
        </p>
        <p>
            追踪号2：<span data-bind="text: strNo2"></span>
            承运商：<span data-bind="text: trackings[1].carrier"></span>
        </p>
    </div>
</div>

关键说明 #

• 拆分单号时用split(',')配合map(num => num.trim())，避免单号前后的空格影响判断
• 承运商判断逻辑可根据实际单号长度调整（示例中以长度>9作为DHL的判定条件）
• 计算属性会自动响应current_tracking的变化，无需手动触发更新

内容的提问来源于stack exchange，提问作者Aknot