Есть ли способ в руле JS включить логические операторы в стандартный условный оператор handlebars.js? Что-то вроде этого:
{{#if section1 || section2}}
.. content
{{/if}}
Я знаю, что мог бы написать своего собственного помощника, но сначала я хотел бы убедиться, что я не изобретаю велосипед.
javascript
handlebars.js
Майк Робинсон
источник
источник
registerBoundHelper
не может работать с синтаксисом Handlebars. Временное решение: создать собственное представление: stackoverflow.com/questions/18005111/…Принимая решение на шаг дальше. Это добавляет оператор сравнения.
Используйте его в таком шаблоне:
Версия Coffee Script
источник
'||'
и'&&'
. Я добавил эти случаи, и они очень полезны.v1 = Ember.Handlebars.get(this, v1, options)
v2 = Ember.Handlebars.get(this, v2, options)
Handlebars поддерживает вложенные операции. Это обеспечивает большую гибкость (и более чистый код), если мы пишем нашу логику немного по-другому.
На самом деле, мы можем добавить все виды логики:
Просто зарегистрируйте этих помощников:
источник
options
выполнения лучше придерживатьсяif
метода и легче тестировать. Спасибо!and
иor
помощники работать только с 2 - мя параметрами, которые не то , что вы хотите. Мне удалось переделатьand
иor
помощников и помощников для поддержки более двух параметров. Используйте одну гильзу дляand
:return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
и использовать этот один вкладыш дляor
:return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
.взяв это на ступеньку выше, для тех из вас, кто живет на краю.
gist : https://gist.github.com/akhoury/9118682 Демонстрация : фрагмент кода ниже
Помощник руля:
{{#xif EXPRESSION}} {{else}} {{/xif}}
помощник для выполнения оператора IF с любым выражением
encodeURIComponent(property)
template( {name: 'Sam', age: '20' } )
, обратите вниманиеage
на этоstring
, просто для того, чтобы я мог продемонстрироватьparseInt()
позже в этом постеПрименение:
Вывод
JavaScript: (это зависит от другого помощника - продолжайте читать)
Помощник руля:
{{x EXPRESSION}}
Помощник для выполнения выражений JavaScript
parseInt(property)
template( {name: 'Sam', age: '20' } )
,age
этоstring
для демонстрационной цели, это может быть что угодно ..Применение:
Вывод:
JavaScript:
Это выглядит немного большим, потому что я расширил синтаксис и прокомментировал почти каждую строку для ясности
Moar
если вы хотите получить доступ к области верхнего уровня, это немного отличается, выражение является объединением всех аргументов, использование: скажем, данные контекста выглядят так:
Javascript:
источник
{{#each}} ... {{xif ' ../name === this.name' }} {{/each}}
... но я все еще расследую ..{{z ...}}
помощникeval(expression);
на это:eval('(function(){try{return ' + expression + ';}catch(e){}})();');
- я знаю, что это становится уродливым, но не могу придумать безопасный способ сделать это - пожалуйста, знайте, что это не очень "быстро" выполнить, я бы не стал делать это в огромная итерация.Есть простой способ сделать это без написания вспомогательной функции ... Это можно сделать в шаблоне полностью.
Редактировать: И наоборот, вы можете сделать это, сделав это:
Редактировать / Примечание: с веб-сайта руля: handlebarsjs.com вот ложные значения:
источник
Одна проблема со всеми ответами, опубликованными здесь, заключается в том, что они не работают со связанными свойствами, т.е. условие if не переоценивается, когда изменяются соответствующие свойства. Вот немного более продвинутая версия помощника, поддерживающего привязки. Он использует функцию связывания из источника Ember, которая также используется для реализации обычного
#if
помощника Ember .Это ограничено одним связанным свойством с левой стороны по сравнению с константой с правой стороны, что, на мой взгляд, достаточно для большинства практических целей. Если вам нужно что-то более сложное, чем простое сравнение, тогда, возможно, было бы хорошо начать объявлять некоторые вычисляемые свойства и использовать
#if
вместо этого обычный помощник.Вы можете использовать это так:
источник
Усовершенствованное решение, которое в основном работает с любым бинарным оператором (по крайней мере, числа, строки плохо работают с eval, БУДЬТЕ ОСТОРОЖНЫМ ВСТУПЛЕНИЕМ В СЦЕНАРИЙ, ЕСЛИ ИСПОЛЬЗУЯ НЕ ОПРЕДЕЛЕННЫЙ ОПЕРАТОР С ПОЛЬЗОВАТЕЛЯМИ)
источник
Вот решение, если вы хотите проверить несколько условий:
Применение:
источник
Вот ссылка на хелпер блока, который я использую: хелпер блока сравнения . Он поддерживает все стандартные операторы и позволяет писать код, как показано ниже. Это действительно очень удобно.
источник
Подобно ответу Джима, но используя немного творчества, мы могли бы сделать что-то вроде этого:
Затем, чтобы использовать его, мы получаем что-то вроде:
Я бы посоветовал убрать объект из функции для повышения производительности, но в противном случае вы можете добавить любую функцию сравнения, какую хотите, включая «и» и «или».
источник
Еще одна альтернатива - использовать имя функции в
#if
. Он#if
обнаружит, является ли параметр функцией, и если это так, то вызовет его и использует свой возврат для проверки достоверности. Ниже myFunction получает текущий контекст какthis
.источник
К сожалению, ни одно из этих решений не решает проблему оператора «ИЛИ» cond1 || cond2 ".
Используйте «^» (или) и проверьте, верно ли в противном случае cond2
{{#if cond1}} ДЕЙСТВОВАТЬ {{^}} {{#if cond2}} ДЕЙСТВОВАТЬ {{/ if}} {{/ if}}
Это нарушает СУХОЕ правило. Так почему бы не использовать частичное, чтобы сделать его менее грязным
источник
Я могу понять, почему вы хотели бы создать помощника для ситуаций, когда у вас есть большое количество различных сравнений для выполнения в вашем шаблоне, но для сравнительно небольшого числа сравнений (или даже одного, которое и привело меня на эту страницу в первое место), вероятно, было бы проще определить новую переменную handlebars в вызове функции визуализации вида, например:
Перейдите к рулю на рендере:
и затем в вашем шаблоне руля:
Я упоминаю об этом для простоты, а также потому, что это ответ, который может быть быстрым и полезным, но при этом соответствовать логике Руль.
источник
Установите дополнение Ember Truth Helpers , выполнив следующую команду
Вы можете начать использовать большинство логических операторов (например, not-eq, not, и, или, gt, gte, lt, lte, xor).
Вы можете даже включить подвыражение, чтобы пойти дальше,
источник
Еще одно кривое решение для троичного помощника:
Или простой помощник по объединению:
Поскольку эти символы не имеют особого значения в разметке руля, вы можете использовать их для имен помощников.
источник
Я нашел пакет npm, сделанный с CoffeeScript, в котором есть много невероятно полезных помощников для Handlebars. Посмотрите документацию по следующему URL:
https://npmjs.org/package/handlebars-helpers
Вы можете сделать
wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz
скачать их и посмотреть содержимое пакета.Вы сможете делать такие вещи, как
{{#is number 5}}
или{{formatDate date "%m/%d/%Y"}}
источник
если вы просто хотите проверить, присутствует ли тот или иной элемент, вы можете использовать этот пользовательский помощник
нравится
если вам также нужно иметь "или" для сравнения возвращаемых значений функции я бы лучше добавил другое свойство, которое возвращает желаемый результат.
Шаблоны должны быть без логики в конце концов!
источник
Для тех, у кого есть проблемы со сравнением свойств объекта, внутри помощника добавьте это решение
Помощник Ember.js неправильно распознает параметр
источник
Только что пришел к этому сообщению из поиска Google о том, как проверить, равна ли строка другой строке.
Я использую HandlebarsJS в NodeJS на стороне сервера, но я также использую те же файлы шаблонов на внешнем интерфейсе, используя версию HandlebarsJS для браузера для его анализа. Это означало, что если бы мне нужен пользовательский помощник, мне пришлось бы определять его в двух разных местах или назначать функцию для рассматриваемого объекта - слишком много усилий !!
Люди забывают, что некоторые объекты имеют наследуемые функции, которые можно использовать в шаблоне усов. В случае строки:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.
Мы можем использовать этот метод для возврата либо массива совпадений, либо
null
если совпадений не найдено. Это прекрасно, потому что, глядя на документацию HandlebarsJS http://handlebarsjs.com/builtin_helpers.htmlYou can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.
Так...
ОБНОВИТЬ:
После тестирования во всех браузерах это не работает в Firefox . HandlebarsJS передает другие аргументы в вызов функции, что означает, что при вызове String.prototype.match второй аргумент (т. Е. Флаги Regexp для вызова функции match в соответствии с приведенной выше документацией), по-видимому, передается. Firefox рассматривает это как устаревшее использование String.prototype.match, и поэтому ломает.
Обходной путь - объявить новый функциональный прототип для объекта String JS и использовать его вместо этого:
Убедитесь, что этот код JS включен, прежде чем запускать функцию Handlebars.compile (), а затем в шаблон ...
источник
Здесь у нас есть ванильные рули для нескольких логических && и || (и или):
Не уверен, что «безопасно» использовать «и» и «или» ... может быть что-то вроде «op_and» и «op_or»?
источник
Правильное решение для И / ИЛИ
Затем позвоните следующим образом
Кстати: обратите внимание, что приведенное здесь решение неверно, он не вычитает последний аргумент, который является именем функции. https://stackoverflow.com/a/31632215/1005607
Его оригинальное И / ИЛИ было основано на полном списке аргументов
Может кто-нибудь изменить этот ответ? Я просто потратил впустую час, пытаясь что-то исправить в ответе, рекомендованном 86 людьми. Исправление состоит в том, чтобы отфильтровать последний аргумент, который является именем функции.
Array.prototype.slice.call(arguments, 0, arguments.length - 1)
источник
Следуя этим двум руководствам: « способ-позволить-пользователям-определить-пользователь-сделал-----------------в-в» и хелперы с настраиваемыми привязками, я смог настроить мои общие представления в этом посте на stackoverflow, чтобы использовать его вместо стандартного # если заявление. Это должно быть более безопасно, чем просто бросить туда #if.
Помощники по обычаю в этой сути выдающиеся.
Я использую Ember Cli для создания своего приложения ember.
Текущая настройка на момент публикации:
источник
В Ember.js вы можете использовать inline if helper в if block helper. Он может заменить
||
логический оператор, например:источник
Вы можете сделать это просто используя логический оператор, как показано ниже:
Перед закрытием, если вы можете написать свою бизнес-логику
источник
Вы можете использовать следующий код:
источник
Вот подход, который я использую для ember 1.10 и ember-cli 2.0.
Затем вы можете использовать его в своих шаблонах, как это:
Где аргументы выражения передаются как
p0
,p1
иp2
т. Д., И на нихp0
также можно ссылаться какthis
.источник