Javascript 如何使用Breeze导航属性对敲除中的html表进行排序？

我使用Breeze.js将我的数据模型交给Knockout.js，在一个相当简单的视图模型中处理适配器库。我使用和此淘汰绑定处理程序在实体属性上创建了排序表：

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;
                });
            }
        };
    }
};

从js访问my EF中的特定数据将是：

specificAdapters（）[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>

然后在查询执行后运行循环，将线路板名称重新映射到另一个实体。不过，这似乎是一个难题，在我的整个应用程序中都必须大量执行，而对绑定处理程序的修复将是最好的解决方案

感谢@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;
                });
            }
        };
    }
};

ko.bindingHandlers.sort={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var-asc=false；
element.style.cursor='pointer'；
element.onclick=函数（）{
var value=valueAccessor（）；
var prop=value.prop；
var数据=value.arr；
var propNestings=拆分的项目（“.”）；
var propnestingscont=propNestings.length；
asc=！asc；
如果（asc）{
数据排序（函数（左、右）{
var leftProp=ko.utils.unwrapobbservable（左）；
var rightProp=ko.utils.unwrapobbservable（右）；
对于（变量i=0；irightProp？-1:1；
});
}
};
}
};

在排序函数中，它假设sort属性只是一个敲除可观察对象的命名属性。您可以尝试递归地展开它们，例如（未测试）：

ko.bindingHandlers.sort={
init:function（元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext）{
var-asc=false；
element.style.cursor='pointer'；
element.onclick=函数（）{
var value=valueAccessor（）；
var prop=value.prop；
var数据=value.arr；
var propNestings=拆分的项目（“.”）；
var propnestingscont=propNestings.length；
asc=！asc；
如果（asc）{
数据排序（函数（左、右）{
var leftProp=ko.不可观测（左）；
var rightProp=ko.不可观测（右）；
对于（变量i=0；irightProp？-1:1；
});
}
};
}
};

是的，这是假设命名属性，我只是对JS相当陌生，所以我想到了您刚才列出的一些内容，但我不知道如何进行。谢谢你，我今晚会实现这个，然后再回复你。这成功了，我将把完成/测试的代码添加到问题中。另外，

ko.utils.unwrapobbservable

是访问当前敲除的正确区域。当使用它们作为数组索引时，我还必须从

leftProp

和

rightProp

中删除“（）”。

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

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;
                });
            }
        };
    }
};

    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;
                });
            }
        };
    }
};