Knockout & doT.js: как создавать шаблоны для событий

Поэтому я хочу заменить шаблонизатор Knockout на doT для повышения производительности моего крупномасштабного одностраничного приложения. Я смог заставить doT.js работать с нокаутом в качестве движка шаблонов, но у меня есть большая проблема.

Я привык использовать нокаут event привязки, чтобы удержать меня от необходимости добавлять обработчики событий в мои ViewModels. Но doT.js, кажется, не предоставляет эту опцию. Я думаю, что основной причиной этого является то, что doT.js просто компилирует строку html.

Каков был бы лучший способ определить события в моих представлениях и при этом использовать doT.js? Это было сделано раньше?

Я думаю, что я должен был бы определить свои события в data- Атрибут и как только doT.js завершит компиляцию, бросьте эту HTML-строку в отдельный элемент DOM. Тогда я должен был бы сделать что-то вроде .querySelectorAll найти data- атрибуты события и прикрепите их к родительскому элементу.

У кого-нибудь есть мысли по этому поводу лучше?

Пример JSFiddle

Вот пример совместной работы Knockout.js и doT.js (взят из этого примера):

http://jsfiddle.net/eeKe7/

Источник

2 ответа

Решение

Не уверен, правильно ли я понимаю, но вы уже используете doT в качестве движка шаблонов; почему бы просто не позволить нокауту справиться с вещами, которые DoT не поддерживает?

<script id="ko-dot" type="text/html">
    {{~ it.items() :item }}
    <div>
        <span>{{=item.name()}}</span>, 
        <span>{{=item.age()}}</span><br>
        <ul>
            {{~ item.likes() :like }}
            <li data-bind="event: { click: itemClick }">{{= like}}</li>
            {{~}}
        </ul>
    </div>
    {{~}}
</script>

http://jsfiddle.net/sjroesink/ytdLj/

редактировать

И если вы также хотите изменить нотацию JS внутри привязки данных, вы также можете использовать doT:

<li data-bind="{{=it.event = { click: it.itemClick } }}">{{= like}}</li>

http://jsfiddle.net/sjroesink/ytdLj/2/

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

Источник

Вы можете заставить его работать, задав точку функции вместо ссылки на функцию. Но я не рекомендовал бы это и это уродливо!

<button data-bind="click: {{!item.someFunc}}">Click Me...</button>

Пример: http://jsfiddle.net/ytdLj/8/

Кому-нибудь удалось решить проблему контекста?

Источник
Другие вопросы по тегам