Множественное связывание данных в нокауте js

У меня есть две текстовые свойства 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 Нью-Йорк

Пожалуйста, расскажите мне, как это сделать.

Ответы

Ответ 1

Вы не можете использовать два одинаковых привязки для элемента. Вместо этого вы должны создать вычисленный формат, который форматирует текст, используя два значения, которые вы хотите отобразить.

Например (Предполагая, что ваша дата и город являются наблюдаемыми):

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()" />

Лично я считаю, что расчетный подход - это более чистый путь.

Ответ 2

Вы можете просто написать: -

data-bind = "text: Date() + City()"

И если вы хотите добавить любую строку ex: - 2013-05-24: New York, вы можете указать как:

data-bind = "text: Date() + ':' + City()"

Таким образом, это сработало для меня.

Ответ 3

Чтобы использовать отдельные стили для каждой части, вам понадобятся отдельные HTML-элементы для прикрепления этих стилей. Использование span для каждой части будет работать.

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

Ответ 4

вы могли бы добавить 2 промежутка или называть это следующим образом

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

Ответ 5

С ko.punches вы могли бы сделать

<div class='date city'>{{ Date() }} {{ City }}</div>

Еще один вариант с отличным плагином.

Ответ 6

используйте знак "," или "+", чтобы выполнить множественную привязку данных.

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


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

Ответ 7

Попробуйте использовать этот формат:

data-bind="text: city() + ', ' + state() + ' ' + zipcode()"