Handlebars.js: 단일 태그에서 여러 도우미를 사용할 수 있습니까?

{{headerText {{getTitle "my_page"}}}} 와 같이 표현식을 중첩하는 방법이 필요하다고 생각합니다.

현재 지원되지 않으며 지원할 계획도 없습니다.

그러나 이론적으로 다른 도우미를 의도적으로 소비하고 연결하는 도우미를 만들 수 있습니다.

{{chain "helper1" "helper2" text}}

누군가 관심이 있다면 다음과 같은 도우미를 만들었습니다.

Handlebars.registerHelper('chain', function () {
    var helpers = [], value;
    $.each(arguments, function (i, arg) {
        if (Handlebars.helpers[arg]) {
            helpers.push(Handlebars.helpers[arg]);
        } else {
            value = arg;
            $.each(helpers, function (j, helper) {
                value = helper(value, arguments[i + 1]);
            });
            return false;
        }
    });
    return value;
});

다음과 같이 작동합니다.

{{chain "taxAdd" "formatPrice" this.product.price}}

jQuery에 종속성을 도입하는 @Znarcus

@jrajan 저는 jQuery.each 만 사용했습니다. 원하는 대로 자유롭게 다시 작성하세요.

누구든지 jQuery 불가지론적 버전에 관심이 있다면:

Handlebars.registerHelper('chain', function() {
  var helpers = [];
  var args = Array.prototype.slice.call(arguments);
  var argsLength = args.length;
  var index;
  var arg;

  for (index = 0, arg = args[index];
       index < argsLength;
       arg = args[++index]) {
    if (Handlebars.helpers[arg]) {
      helpers.push(Handlebars.helpers[arg]);
    } else {
      args = args.slice(index);
      break;
    }
  }

  while (helpers.length) {
    args = [helpers.pop().apply(Handlebars.helpers, args)];
  }

  return args.shift();
});

두 구현의 한 가지 문제는 주목할 가치가 있습니다. 인수 중 하나가 도우미에 전달되는 값으로 의도되었지만 기존 도우미의 이름과 일치하는 문자열(강제 가능)인 경우 예기치 않은 결과가 발생합니다.

다음은 두 가지 구현입니다. 둘 다 이전 예제와 달리 각 도우미에 여러 인수를 보낼 수 있습니다.
그들은 또한 커피 스크립트로 작성되었으며 밑줄 또는 lodash에 의존합니다.

첫 번째는 다음과 같이 할 수 있습니다.
{{{chain 'join-strings' 'link-twitter-handles' '@' twitterUsername}}}
그러나 다음과 같은 경우 예기치 않은 결과가 발생합니다.
{{{chain 'join-strings' 'link-twitter-handles' '@' 'join-strings' twitterUsername}}}

Handlebars.registerHelper 'chain', ->
    # Get rid of the options hash
    args = Array.prototype.slice.call arguments, 0, -1
    helpers = []
    argsForHelpers = null
    value = undefined

    _.each args, (arg, i) ->
        if Handlebars.helpers[arg]
            helpers.push Handlebars.helpers[arg]
        else if not value # Only call the helpers once
            value = arg
            unless argsForHelpers
                argsForHelpers = args[i+1..-1]
                argsForHelpers.unshift value
            _.each helpers, (helper) ->
                argsForHelpers[0] = value
                value = helper.apply null, argsForHelpers

    value

이 두 번째 예에는 chain 가 인수에서 도우미를 분할할 수 있는 구분 기호가 있습니다.
도우미는 구분 기호 앞의 모든 인수가 도우미이고 다른 모든 인수는 도우미에 대한 인수로 전달되어야 한다고 가정합니다.

Handlebars.registerHelper 'chain', ->
    # Get rid of the options hash
    args = Array.prototype.slice.call arguments, 0, -1
    helpers = []

    for arg,i in args
        if arg is '--'
            argsForHelpers = args.slice i + 1
            value = argsForHelpers[0]
            break
        else
            helpers.push Handlebars.helpers[arg]

    _.each helpers, (helper) ->
        argsForHelpers[0] = value
        value = helper.apply null, argsForHelpers

    value

주어진 템플릿:
{{{chain 'join-strings' 'link-twitter-handles' '@' 'join-strings' twitterUsername}}}
그리고 이 객체:
{twitterUsername: 'abc'}
다음과 같이 컴파일된 템플릿을 기대할 수 있습니다.
<a href="https://twitter.com/join-stringsabc">@join-stringsabc</a>

@cdata 의 구현을 가져

/**
 * Takes an arbitrary number of arguments, the first of which is the operation type 'AND' or 'OR'.
 * Following that will be a list of block helper names prefixed by '!!'.
 * Calls each block helper with the remaining arguments.
 *
 * <strong i="7">@returns</strong> {string}  returns options.fn(this) or options.inverse(this) depending on result of each helper and operation type
 */
Handlebars.registerHelper('chainBlockHelpers', function() {
    var index, arg, helperResult, pass,
        helpers = [],
        args = Array.prototype.slice.call(arguments),
        argsLength = args.length,
        options = args[argsLength-1],
        operation = args.shift(),
        passVal = options.fn(this),
        failVal = options.inverse(this);

    if (operation !== 'AND' && operation !== 'OR')
        throw new Error ('chainBlockHelpers only supports "AND" or "OR" operations.')

    for (index = 0, arg = args[index]; index < argsLength; arg = args[++index]) {
        if (typeof arg == 'string' && arg.startsWith('!!') && Handlebars.helpers[arg.substr(2)]) {
            helpers.push(Handlebars.helpers[arg.substr(2)]);
        } else {
            args = args.slice(index);
            break;
        }
    }

    if (operation === 'AND') {
        pass = true;
        while (helpers.length) {
            helperResult = helpers.pop().apply(Handlebars.helpers, args);
            if (helperResult == failVal) {
                pass = false;
                break;
            }
        }
    } else {
        pass = false;
        while (helpers.length) {
            helperResult = helpers.pop().apply(Handlebars.helpers, args);
            if (helperResult == passVal) {
                pass = true;
                break;
            }
        }
    }

    return pass ? passVal : failVal;
});

이것은 다음과 같은 것을 사용하여 기본적으로 지원하는 것으로 보입니다.

{{ helper1 (helper2 text) }}

경우에 따라 도우미가 다음과 같이 작동하도록 할 수 있습니다.

{{#helper1}}{{helper2}}content{{/helper2}}{{/helper1}}

@Znarkus 귀하의 방법을 사용하여 안전한 문자열이 적용된 두 도우미를 전달하면 코드가 중단됩니다. 데이터를 처음 전달할 때 문자열로 수신되지만 전달되는 값이 개체인 것처럼 보이는 두 번째 필터는 무엇입니까? 내 디버거에서는 '줄 바꿈 없음 및 문자열:'내 값'으로 표시됩니다. SafeString이 값에 대해 수행하는 작업은 확실하지 않지만 두 번 전달하면 제대로 작동하지 않는 것 같습니다.

    Handlebars.registerHelper('shortNumber', function (value) {
        //return new Handlebars.SafeString(iSpot.number.shortNumber(value)); // Breaks
        return iSpot.number.shortNumber(value);  // Works
    });
    Handlebars.registerHelper('asDollars', function (value) {
        //return new Handlebars.SafeString(iSpot.number.asDollars(value)); // Breaks
        return iSpot.number.asDollars(value); // Works
    });

+1 @amwmedia 접근 방식 - {{pluralize (titleize (humanize schema.name))}}

멋진 깨끗한 구문처럼 보이는 +1.

+1 @amwmedia 완벽하게 작동합니다 감사합니다

@breandr / @amwmedia 접근 방식은 매력처럼 작동하지만 위에서 언급한 @cssagogo 처럼 Handlebars.SafeString() 가 없습니다 .

그래서 당신은 smth를 할 수 있습니다. 처럼:

{{> partial text=(concat value (default extension 'PDF')) }}

감사

나는이 문제에 직접 부딪쳤다. 나는 이것에 정말 늦었다는 것을 알고 있지만 저에게 효과적인 해결책이 있습니다. 이것이 이미 언급된 경우 용서해 주십시오(확인할 시간이 없었습니다). 이것은 가장 멋진 솔루션이 아니며 기술적으로 귀하의 질문에 대한 직접적인 답변은 아니지만 문제에 대한 솔루션입니다(하나의 값에서 여러 기능 실행).

모든 도우미 기능을 별도의 파일에 보관합니다. 그것들은 모두 같은 위치에 있기 때문에 한 도우미에게 값을 전달한 다음 도우미 함수의 파일에 있는 다른 모든 함수를 호출할 수 있습니다. 그래서:

{{ function1 value }}

도우미 파일

function2 (value) {
   // code
}

function1 (value) {
   // code
   function2(value)
   // code
   return value;
}

물론 이것은 원하는 만큼 많은 기능을 사용할 수 있는 간단한 방법입니다. "체이너" 역할을 하는 기본 기능을 지정할 수도 있습니다.

{{ chainer value }}

도우미 파일

function1 (value) {
   // code
}
function2 (value) {
   // code
}
function3 (value) {
   // code
}
function4 (value) {
   // code
}

function chainer(value) {
   function1(value)
   function2(value)
   function3(value)
   function4(value)
   return value;
}

나는 이것을 직접하지 않았지만 그것이 작동하지 않는 이유를 모르겠습니다.

참고 HTML에서 사용하려는 함수를 핸들바 도우미로 등록하기만 하면 됩니다. 나는 개인적으로 서로 독립적으로 사용하기 때문에 내 모든 것을 등록했지만 직접 사용할 필요가 없다고 생각하지 않으면 등록하지 않아도 됩니다.

절차적 프로그래밍으로의 회귀 :)