Multiple data-bind in knockout js

Question

I have two text property data Date and City are observables. I need to concatenate two text property data in single div. and apply separate style for both the texts. Current Scenario is used knockoutjs data-bind property :

<div class="date" data-bind="text:Date" />
<div class="city" data-bind="text:City" />

Expected :

<div class="date city" data-bind=" text:Date text:City" />

Output : 2013-05-24 New York

Please guide me how to do this.

Answer 1

You can't use two of the same binding on an element. Instead, you should create a computed which formats the text using the two values you want to display.

For example (Assuming your Date and City are observables):

viewModel.DateCity = ko.computed(function() {
  return viewModel.Date() + " - " + viewModel.City();
});

Then in your data-bind, you just bind to the computed.

<div class="date city" data-bind="text:DateCity" />

Another option is to combine the values in the binding directly.

<div class="date city" data-bind="text: Date() + ' - ' + City()" />

Personally I feel that the computed approach is a cleaner way to go.