Блог

Главная - Вопросы по программированию - Создание шаблона

Создание шаблона

#knockout.js

#knockout.js

Вопрос:

Есть ли способ в knockoutjs создать шаблон knockout, но добавить дополнительный HTML в зависимости от переданных ему значений.

Пример:

 <script type="text/html" id="userMessageTemplate">
    <div class="chatContent">
        <span data-bind="text: userName"></span>
        <span data-bind="text: userMessageAlert "></span>
    </div>
</script>

В настоящее время этот шаблон имеет два тега span, каждый из которых привязан к свойствам userName и userMessgeeAllert из модели с уважением.

Теперь я решаю использовать этот шаблон где-нибудь еще, но вместо имени пользователя я хочу, чтобы он привязывался к OrderNo, а также добавлял другой тег span, называемый Address:

 <script type="text/html" id="userMessageTemplate">
    <div class="chatContent">
        <span data-bind="text: OrderNo"></span>
        <span data-bind="text: userMessageAlert "></span>
        <span data-bind="text: Address "></span>
    </div>
</script>

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

 function (orderNo, userMessageAllert,Address)
{
// now based on the values create template 
}

Комментарии:

1. Ваши шаблоны не имеют много общего. Почему бы вам просто не создать два шаблона? Это было бы проще и удобнее для чтения

2. Избегайте необходимости создавать множество шаблонов. Решение, которое мне нужно, чтобы создать javascript createtemplateфункцию, принимающую значения, такие как Address, OrderNo. Затем есть некоторый код, который создает тег span для каждого значения, устанавливая его атрибут привязки к данным

3. Ну, вы могли бы использовать if привязку, она все равно была бы более читаемой

Ответ №1:

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

 <script type="text/html" id="userMessageTemplate">
    <div class="chatContent" data-bind="foreach: $data">
        <span data-bind="text: $data"></span>
    </div>
</script>

В общем, я бы посмотрел на нокаутирующие компоненты. Пока не выпущен, но скоро будет, и это позволяет передавать данные в ваш шаблон, на которые он может разумно реагировать.