Javascript KnockoutJS-将计算值添加到可观察数组

我使用KnockoutJS将数据绑定到页面，ViewModel由来自使用的AJAX调用的JSON响应填充，如下所示：

$(function () {
    $.getJSON("@Url.Action("Get")", 
        function(allData) {
            viewModel = ko.mapping.fromJS(allData);

            viewModel.Brokers.Url = ko.computed(function()
            {
                return 'BASEURLHERE/' + this.BrokerNum();
            });

            ko.applyBindings(viewModel);
    });
});

---

中间部分不起作用（如果没有计算属性，它可以正常工作）。“Brokers”是一个可观察的数组，我想向数组中名为URL的每个元素添加一个计算值。我正在将代理数组绑定到foreach，我想将该URL用作锚的

href

属性。有什么想法吗？

好吧，如果您想在每个代理中添加Url，您必须将其添加到每个代理中：

$.each(viewModel.Brokers(), function(index, broker){
    broker.Url = ko.computed(function(){return 'BASEURLHERE/' + broker.BrokerNum();});
});

我猜BrokerNum不会改变，所以您不妨只计算一次Url：

$.each(viewModel.Brokers(), function(index, broker){
    broker.Url = 'BASEURLHERE/' + broker.BrokerNum();
});

您还可以通过向ko.mapping.fromJS函数提供“创建”回调，在映射过程中添加Url属性。有关详细信息，请参阅

如果只需要url绑定到href，只需在html中绑定表达式（在foreach绑定中）：

---

我一直在处理非常类似的问题，我发现您可以拦截代理对象的创建，并使用mapping options参数插入您自己的字段：

var data = { "Brokers":[{"BrokerNum": "2"},{"BrokerNum": "10"}] };

var mappingOptions = {
    'Brokers': {
        create: function(options) {
            return (new (function() {
                this.Url = ko.computed(function() {
                    return 'http://BASEURLHERE/' + this.BrokerNum();
                }, this);

                ko.mapping.fromJS(options.data, {}, this); // continue the std mapping
            })());
        }
    }
};

viewModel = ko.mapping.fromJS(data, mappingOptions);

ko.applyBindings(viewModel);

---

这里有一把小提琴来演示这一点：

多亏了彼得·威尔斯，我有了非常相似的解决方案：

var ViewModel = function (data, ranges) {
    var self = this;

    this.productList = ko.observableArray();
    var productListMapping = {
        create: function (options) {
            return (new (function () {
            //this row above i don't understand...
                this.len = ko.computed(function () {
                    //just test function returning lenght of object name
                    // and one property of this model
                    return this.name().length + ' ' + self.cons_slider_1();
                }, this);

                ko.mapping.fromJS(options.data, {}, this); // continue the std mapping
            })());
        }
    }

    this.cons_slider_1 = ko.observable(100);

    ko.mapping.fromJS(data, productListMapping, this.productList);
};

一些差异： 我没有映射到self，而是映射到这个.product。 输入json没有像上面示例中的“Brokers”那样的父名称：

var products = [
    { "id": "pp1", "name": "Blue windy" },
    { "id": "pp1", "name": "Blue windy" }];

所以在productMapping中，我只键入“create:”

但是，我不理解的是create函数的结构。有人能解释一下为什么函数返回新函数，它有属性。难道不能简化一下吗

var products = [
    { "id": "pp1", "name": "Blue windy" },
    { "id": "pp1", "name": "Blue windy" }];