[英]KnockoutJS - Adding computed values to an observable array
我使用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
属性。 有任何想法吗?
我一直在处理非常类似的问题,我发现你可以拦截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/
好吧,如果你想在每个经纪人中使用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>
感谢Peter Wiles,我有非常相似的解决方案:
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没有像'Brokers'这样的父名称:
var products = [
{ "id": "pp1", "name": "Blue windy" },
{ "id": "pp1", "name": "Blue windy" }];
所以在productMapping中我输入的只是'create:'
但是,我不明白的是创建功能的结构。 有人可以解释一下为什么函数返回具有属性的新函数。 难道不能以某种方式简化?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.