KnockoutJS添加计算的值到可观察阵列

Question

我使用KnockoutJS数据绑定到一个页面，视图模型是由从一个AJAX调用使用mapping plugin的JSON响应，这样填充中间部分没有工作（没有计算的属性，它工作正常）。 “Brokers”是一个可观察数组，我想将计算值添加到数组中称为URL的每个元素。我将Brokers数组绑定到foreach，并且我想使用该URL作为锚的href属性。有任何想法吗？

Answer 1

好吧，如果你在各家券商想的网址，你必须将它添加到每个经纪人：

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

我猜BrokerNum是不会改变的，所以你可能也只是计算网址一次：

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

您还可以在映射期间通过向ko.mapping.fromJS函数提供“create”回调来添加Url属性。详情请参阅mapping plugin docs。

如果你只需要网址绑定到HREF，只要绑定在html中（绑定的foreach内）表达：我经历过非常类似的问题，工作

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

Answer 2

我发现，你可以拦截代理对象的创建和使用映射选项参数插入自己的领域：

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 3

感谢彼得·怀尔斯我有非常类似的解决方案：

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我打字只是“创建：”

但是，我不明白的是结构创建功能。有人可以解释为什么函数返回具有属性的新函数。难道不能简化它吗？