KnockoutJS-将计算值添加到可观察数组中
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对象的创建,并使用映射选项参数插入您自己的字段:
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函数提供"创建"回调来添加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);
};
一些差异:我不是在映射自我,而是在这个产品上。输入json没有像上面示例中的"Brokers"那样的父名称:
var products = [
{ "id": "pp1", "name": "Blue windy" },
{ "id": "pp1", "name": "Blue windy" }];
所以在productMapping中,我只输入"create:"
但是,我不明白的是创造功能的结构。有人能解释一下为什么这个函数会返回一个具有属性的新函数吗。难道不能以某种方式简化吗?
相关文章:
- knockoutjs可观察数组
- 将js对象更改为使用嵌套的可观察数组敲除js视图模型
- 敲除:可观察数组没有被正确绑定——只有1个结果显示,而api返回6
- $scope$观察数组中的一个特定对象——Angular JS控制器
- 如何使用敲除映射将空值映射到空的可观察数组
- 以不同的方式对相同的可观察数组进行排序
- 如何在 Knockout.js 中更新可观察数组后立即使用 DOM 容器
- Knockout.js:如何根据可观察数组中的更改更改值
- 使用挖空.js如何刷新 Select 元素中的可观察数组
- 更新挖空中可观察数组中项目的属性
- 动态地向可观察数组中的特定项添加绑定(例如hasfocus)
- AngularJS:观察数组属性
- 对可观察数组foreach的更新删除了格式化knockoutjs
- 当通过Ajax成功回调更新可观察数组时,启用绑定中断
- 如何获取复选框值并将其插入到挖空中的可观察数组中
- 剔除不更新辅助表的可观察数组
- 如何让Knockout可观察数组与jQuery对话框一起工作
- 更改可观察数组会更改自定义绑定处理程序knockoutjs的可见性
- 正在更新Knockoutjs可观察数组项
- Knockout,无法解析空可观察数组中的绑定错误