javascript - 如何使用 Breeze 导航属性对 knockout 中的 html 表进行排序？

Question

我使用 Breeze.js 将我的数据模型交给 Knockout.js，以相当简单的 View 模型处理适配器库。我使用 tablesorter 对实体属性进行排序表以及这个 knockout 绑定(bind)处理程序:

ko.bindingHandlers.sort = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var asc = false;
        element.style.cursor = 'pointer';

        element.onclick = function () {
            var value = valueAccessor();
            var prop = value.prop;
            var data = value.arr;

            asc = !asc;
            if (asc) {
                data.sort(function (left, right) {
                    return left[prop]() === right[prop]() ? 0 : left[prop]() < right[prop]() ? -1 : 1;
                });
            } else {
                data.sort(function (left, right) {
                    return left[prop]() === right[prop]() ? 0 : left[prop]() > right[prop]() ? -1 : 1;
                });
            }
        };
    }
};

我正在扩展 Breeze 数据服务中的导航属性，它可以将数据绑定(bind)到表中。

em.executeQuery(breeze.EntityQuery.from('SpecificAdapters').expand('Adapter'));

从 js 访问 EF 中的特定数据将是:specialAdapters()[0].Adapter().BoardName。使用这样的 html:

<table class="tablesorter">
    <thead>
        <tr>
            <th data-bind="sort: {arr: specificAdapters, prop: 'Adapter().BoardName'}">Board Name</th>
            <th data-bind="sort: {arr: specificAdapters, prop: 'PbaNumber'}">Pba Number</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: specificAdapters">
        <tr>
            <td data-bind="text: Adapter().BoardName"></td>
            <td data-bind="text: PbaNumber"></td>
        </tr>
    </tbody>
</table>

我看到“板名称”和“PBA 编号”列均已正确填充。 PBA 编号列对两个方向进行排序。显然，我在使用“板名称”列进行排序时遇到错误。

问题是，我该如何完成这项工作？

我不太了解绑定(bind)处理程序代码，不知道要更改哪些内容才能使该功能适用​​于这两种情况。我所理解的另一个解决方案将涉及扩展 Breeze 中的实体，例如

var store = em.metadataStore;
var SpecificAdapter = function () { this.BoardName = ko.observable(''); };
store.registerEntityTypeCtor('SpecificAdapter', SpecificAdapter);

然后在执行查询后运行循环以将板名称重新映射到其他实体。但这看起来像是一个拼凑，并且必须在我的应用程序中多次执行，其中对绑定(bind)处理程序的修复将是最好的解决方案。

感谢@awexfwex的回答

我必须稍微调整一下代码:ko.utils.unwrapObservable是当前对展开的访问，而leftProp[propNestings[i]]实际上翻译了一个嵌套的和尚未解包属性，它将显示为“Adapter()”。因此，在使用 () 为数组建立索引之前，您必须删除它。

最终代码:

ko.bindingHandlers.sort = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var asc = false;
        element.style.cursor = 'pointer';

        element.onclick = function () {
            var value = valueAccessor();
            var prop = value.prop;
            var data = value.arr;

            var propNestings = prop.split(".");
            var propNestingsCount = propNestings.length;

            asc = !asc;
            if (asc) {
                data.sort(function (left, right) {
                    var leftProp = ko.utils.unwrapObservable(left);
                    var rightProp = ko.utils.unwrapObservable(right);
                    for (var i = 0; i < propNestingsCount; i++) {
                        leftProp = ko.utils.unwrapObservable(leftProp[propNestings[i].replace('()', '')]);
                        rightProp = ko.utils.unwrapObservable(rightProp[propNestings[i].replace('()', '')]);
                    }
                    return leftProp === rightProp ? 0 : leftProp < rightProp ? -1 : 1;
                });
            } else {
                data.sort(function (left, right) {
                    var leftProp = ko.utils.unwrapObservable(left);
                    var rightProp = ko.utils.unwrapObservable(right);
                    for (var i = 0; i < propNestingsCount; i++) {
                        leftProp = ko.utils.unwrapObservable(leftProp[propNestings[i].replace('()', '')]);
                        rightProp = ko.utils.unwrapObservable(rightProp[propNestings[i].replace('()', '')]);
                    }
                    return leftProp === rightProp ? 0 : leftProp > rightProp ? -1 : 1;
                });
            }
        };
    }
};

Answer 1

在您的排序函数中，假设排序属性只是 knockout 可观察量的命名属性。您可以尝试递归地解开它们，例如(未经测试):

    ko.bindingHandlers.sort = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var asc = false;
        element.style.cursor = 'pointer';

        element.onclick = function () {
            var value = valueAccessor();
            var prop = value.prop;
            var data = value.arr;

            var propNestings = prop.split(".");
            var propNestingsCount = propNestings.length;

            asc = !asc;
            if (asc) {
                data.sort(function (left, right) {
                    var leftProp = ko.unwrapObservable(left);
                    var rightProp = ko.unwrapObservable(right);
                    for (var i = 0; i < propNestingsCount; i++) {
                        leftProp = ko.unwrapObservable(leftProp[propNestings[i]]);
                        rightProp = ko.unwrapObservable(rightProp[propNestings[i]]);
                    }
                    return leftProp === rightProp ? 0 : leftProp < rightProp ? -1 : 1;
                });
            } else {
                data.sort(function (left, right) {
                    var leftProp = ko.unwrapObservable(left);
                    var rightProp = ko.unwrapObservable(right);
                    for (var i = 0; i < propNestingsCount; i++) {
                        leftProp = ko.unwrapObservable(leftProp[propNestings[i]]);
                        rightProp = ko.unwrapObservable(rightProp[propNestings[i]]);
                    }
                    return leftProp === rightProp ? 0 : leftProp > rightProp ? -1 : 1;
                });
            }
        };
    }
};