Knockout数据绑定串联的字符串数组

Question

我如何在Knockout中数据绑定串联的字符串数组？我想做这样的事情:

<span data-bind='text: foreach person in persons person.name+","+person.age>

显然语法是错误的,但是可以像上面这样做而不为每个人创建多个跨度吗？

Answer 1

你可以在data-bind中使用任何类型的有效javascript.所以想想有可能做这样的事情:

选项1 - 看小提琴

假设这样的模型:

var model = {
  people : ko.observableArray([
    {name: "Name1", age: 30},
    {name: "Name2", age: 31},
    {name: "Name3", age: 32},
  ])
}

ko.applyBindings(model);

我们可以做的:

<span data-bind='text: people().map(function(p){return p.name + "," + p.age}).join(", ")'> </span>

选项2 - 见小提琴

但是嵌入coplex内联javascript不是一个好习惯,我建议你创建一个像这样的计算属性

var model = {
  people : ko.observableArray([
    {name: "Name1", age: 30},
    {name: "Name2", age: 31},
    {name: "Name3", age: 32},
  ]),
}

model.allPeople = ko.computed(function() {
    return model.people().map(function(p){return p.name + "," + p.age}).join(", ");
});

ko.applyBindings(model);

和HTML:

<span data-bind='text: allPeople'> </span>