Как объединить все элементы в наблюдаемом массиве с помощью нокаута?

Question

Я на следующие объекты:

var Transaction = function (data) { 
    this.ID = ko.observable(data.transaction.ID); 
    this.number = ko.observable(data.transaction.number); 
    this.userID = ko.observable(data.transaction.userID); 
    this.password = ko.observable(data.transaction.password); 

    this.Properties = ko.observableArray(data.Property); 
} 

Свойства наблюдаемым массив выглядит следующим образом (в формате JSON):

[{"address1":"111 Broadway","city":"Brooklyn","state":"NY","zip":null}, 
{"address1":"222 Broadway","city":"Brooklyn","state":"NY","zip":null}] 

В моем HTML у меня есть что-то вроде этого:

<span>PROPERTY</span> 
<span data-bind="foreach: Properties"> 
<span data-bind="text: address1"></span> 
<span data-bind="text: city"></span> 
span data-bind="text: state"></span> 
<span data-bind="text: zip"></span> 
</span> 

В браузере он выглядит так:

PROPERTY 
111 Broadway 
Brooklyn 
NY 
222 Broadway 
Brooklyn 
NY 

И я хочу, чтобы это выглядело как:

111 Broadway, Brooklyn, NY 
222 Broadway, Brooklyn, NY 

Любые советы?

Answer 1

Вы можете создать вычисляемое свойство в Transaction прототипа как Propertiesсписке, что бы упростить HTML-разметку, связанную с ним.

this.propertyView = ko.pureComputed(function() { 
    return this.Properties().map(function(prop) { 
    var singleProp = ''; 
    for (var p in prop) 
     if (prop[p]) 
     singleProp += prop[p] + ', '; 
    return singleProp.slice(0,-2); 
    }); 
}, this); 

<span>PROPERTIES</span> 
<!-- ko foreach: propertyView --> 
<p data-bind="text: $data"></p> 
<!-- /ko --> 

Answer 2

Вы должны обернуть эти свойства "foreached" в элементе уровня блока, например, p или теге div, например. как это:

var Transaction = function (data) { 
 
    this.ID = ko.observable(data.transaction.ID); 
 
    this.number = ko.observable(data.transaction.number); 
 
    this.userID = ko.observable(data.transaction.userID); 
 
    this.password = ko.observable(data.transaction.password); 
 
    this.Properties = ko.observableArray(data.properties); 
 
}; 
 

 
var vm = new Transaction({ 
 
    transaction: { ID: 1, number: 2, userID: 3, password: 'secret' }, 
 
    properties: [{"address1":"111 Broadway","city":"Brooklyn","state":"NY","zip":null}, 
 
       {"address1":"222 Broadway","city":"Brooklyn","state":"NY","zip":null}] 
 
}); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<h1> 
 
    <span data-bind="text: ID"></span> - 
 
    <span data-bind="text: number"></span> - 
 
    <span data-bind="text: userID"></span> - 
 
    <span data-bind="text: password"></span> 
 
</h1> 
 
<span>PROPERTIES</span> 
 
<!-- ko foreach: Properties --> 
 
<p> 
 
    <span data-bind="text: address1"></span> 
 
    <span data-bind="text: city"></span> 
 
    <span data-bind="text: state"></span> 
 
    <span data-bind="text: zip"></span> 
 
</p> 
 
<!-- /ko -->