У меня есть две текстовые свойства Date и City являются наблюдаемыми. Мне нужно объединить две данные свойств текста в одном div. и применять отдельный стиль для обоих текстов. В текущем сценарии используется свойство knockoutjs data-bind:
<div class="date" data-bind="text:Date" />
<div class="city" data-bind="text:City" />
:
<div class="date city" data-bind=" text:Date text:City" />
Вывод: 2013-05-24 Нью-Йорк
Пожалуйста, расскажите мне, как это сделать.
Вы не можете использовать два одинаковых привязки для элемента. Вместо этого вы должны создать вычисленный формат, который форматирует текст, используя два значения, которые вы хотите отобразить.
Например (Предполагая, что ваша дата и город являются наблюдаемыми):
viewModel.DateCity = ko.computed(function() {
return viewModel.Date() + " - " + viewModel.City();
});
Затем в вашей привязке данных вы просто привязываетесь к вычисленному.
<div class="date city" data-bind="text:DateCity" />
Другим вариантом является объединение значений в привязке напрямую.
<div class="date city" data-bind="text: Date() + ' - ' + City()" />
Лично я считаю, что расчетный подход - это более чистый путь.
Вы можете просто написать: -
data-bind = "text: Date() + City()"
И если вы хотите добавить любую строку ex: - 2013-05-24: New York, вы можете указать как:
data-bind = "text: Date() + ':' + City()"
Таким образом, это сработало для меня.
Чтобы использовать отдельные стили для каждой части, вам понадобятся отдельные HTML-элементы для прикрепления этих стилей. Использование span для каждой части будет работать.
<div>
<span class="date" data-bind="text:Date"></span>
<span class="city" data-bind="text:City" ></span>
</div>
вы могли бы добавить 2 промежутка или называть это следующим образом
<div class="date" data-bind="text:Date() +' '+ city()" />
С ko.punches вы могли бы сделать
<div class='date city'>{{ Date() }} {{ City }}</div>
Еще один вариант с отличным плагином.
используйте знак "," или "+", чтобы выполнить множественную привязку данных.
<div class="date city" data-bind=" text:Date(), text: City" />
<div class="date city" data-bind=" text:Date() + City" />
Попробуйте использовать этот формат:
data-bind="text: city() + ', ' + state() + ' ' + zipcode()"