6

我正在使用 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);
    });
});

中间部分不起作用(没有该计算属性它可以正常工作)。“经纪人”是一个可观察的数组,我想为数组中称为 URL 的每个元素添加一个计算值。我将该 Brokers 数组绑定到一个 foreach,并且我想将该 URL 用作href锚点的属性。有任何想法吗?

4

3 回答 3

13

我一直在解决非常类似的问题,我发现您可以拦截 Broker 对象的创建并使用映射选项参数插入您自己的字段:

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/

于 2013-02-05T08:14:23.500 回答
12

好吧,如果你想在每个代理中使用 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 绑定中):

<a data-bind="attr: {href: 'BASEURLHERE/' + BrokerNum()}">link to broker details</a>
于 2012-02-22T21:51:56.720 回答
0

感谢彼得怀尔斯,我有非常相似的解决方案:

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

一些区别:我不是映射到自我,而是在 this.product 上。在上面的示例中,输入 json 没有像“经纪人”这样的父名称:

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

所以在productMapping中我只输入'create:'

但是,我不明白的是 create 函数的结构。有人可以解释一下为什么该函数返回具有属性的新函数。不能以某种方式简化吗?

于 2014-01-30T10:43:47.807 回答