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

Question

我使用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的每个元素添加一个计算值.我将Brokers数组绑定到foreach,我想将该URL用作href锚的属性.有任何想法吗？

Answer 1

我一直在处理非常类似的问题,我发现你可以拦截Broker对象的创建并使用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);

这是一个演示这个的小提琴:http://jsfiddle.net/pwiles/ZP2pg/

Answer 2

好吧,如果你想在每个经纪人中使用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函数提供"create"回调来添加Url属性.有关详细信息,请参阅映射插件文档.

如果你只需要url绑定到href,只需绑定html中的表达式(在foreach绑定中):

<a data-bind="attr: {href: 'BASEURLHERE/' + BrokerNum()}">link to broker details</a>