Knockout. Print two properties of an object in a foreach statement - html

Question

I have an observableArray property self.FilteredStudents, the students have name and lastname, and i want to print it together.
Here is the foreach code in the HTML:
<div class="row justify-content-center" data-bind="foreach: FilteredStudents">
<div class="col-md-6 col-lg-4">
<div>
<div class="LLUserCard">
<div class="LLUserCardHeader">
<div>$name $lastName</div>
<div></div>
</div>
<div class="LLUserCardBody">
</div>
<div class="LLUserCardFooter">
$enrollmentDate
</div>
</div>
</div>
</div>
</div>
Obviously the code above is not working, the pseudocode <div>$name $lastName</div> is just to specify what i am looking for.
In all the examples or tutorials i've found they use two elements like <td data-bind="text: name"></td><td data-bind="text: lastName"></td> but i don't want to print the values in different elements, i want them to be the text of one element.
Thank you.

Answer 1

you can use a computed or pure computed function or an inline function on the text binding https://jsfiddle.net/0o89pmju/69/
html
<p>
<span data-bind="text: Name"></span>
</p>
<p>
Or
</p>
<span data-bind="text: (firstname() + ' ' + lastname() )"></span>
js
function viewModel() {
var self = this;
this.firstname = ko.observable('bob');
this.lastname = ko.observable('smith');
self.Name = ko.pureComputed(function () {
return self.firstname() + ' ' + self.lastname()
},this);
}
var vm = new viewModel();
(function($) {
ko.applyBindings(vm); //bind the knockout model
})(jQuery);