핸들바.js {{#if}} 조건부 논리 연산자

programing

핸들바.js {{#if}} 조건부 논리 연산자

goodsources 2023. 1. 13. 19:55

핸들바.js {{#if}} 조건부 논리 연산자

핸들바 JS에서 논리 연산자를 표준 핸들바.js 조건부 연산자에 통합하는 방법이 있습니까?다음과 같은 경우:

{{#if section1 || section2}}
.. content
{{/if}}

내 조력자를 쓸 수 있다는 건 알지만, 먼저 바퀴를 다시 만들지 않도록 확실히 하고 싶다.

이것은 블록 도우미와 '치팅'을 함으로써 가능합니다.이것은 핸들바를 개발한 사람들의 이데올로기에 어긋나는 것일지도 모른다.

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

그러면 템플릿 내의 도우미를 다음과 같이 호출할 수 있습니다.

{{#ifCond v1 v2}}
    {{v1}} is equal to {{v2}}
{{else}}
    {{v1}} is not equal to {{v2}}
{{/ifCond}}

솔루션을 한 단계 더 발전시킵니다.이렇게 하면 비교 연산자가 추가됩니다.

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {

    switch (operator) {
        case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
        case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
        case '!=':
            return (v1 != v2) ? options.fn(this) : options.inverse(this);
        case '!==':
            return (v1 !== v2) ? options.fn(this) : options.inverse(this);
        case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
        case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
        case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
        case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
        case '&&':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
        case '||':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

다음과 같은 템플릿으로 사용합니다.

{{#ifCond var1 '==' var2}}

Coffee Script 버전

Handlebars.registerHelper 'ifCond', (v1, operator, v2, options) ->
    switch operator
        when '==', '===', 'is'
            return if v1 is v2 then options.fn this else options.inverse this
        when '!=', '!=='
            return if v1 != v2 then options.fn this else options.inverse this
        when '<'
            return if v1 < v2 then options.fn this else options.inverse this
        when '<='
            return if v1 <= v2 then options.fn this else options.inverse this
        when '>'
            return if v1 > v2 then options.fn this else options.inverse this
        when '>='
            return if v1 >= v2 then options.fn this else options.inverse this
        when '&&', 'and'
            return if v1 and v2 then options.fn this else options.inverse this
        when '||', 'or'
            return if v1 or v2 then options.fn this else options.inverse this
        else
            return options.inverse this

핸들 바는 중첩된 작업을 지원합니다.논리를 조금 다르게 쓰면 유연성이 높아집니다(또한 코드도 명확해집니다).

{{#if (or section1 section2)}}
.. content
{{/if}}

실제로 다음과 같은 모든 종류의 논리를 추가할 수 있습니다.

{{#if (or 
        (eq section1 "foo")
        (ne section2 "bar"))}}
.. content
{{/if}}

다음 도우미를 등록하기만 하면 됩니다.

Handlebars.registerHelper({
    eq: (v1, v2) => v1 === v2,
    ne: (v1, v2) => v1 !== v2,
    lt: (v1, v2) => v1 < v2,
    gt: (v1, v2) => v1 > v2,
    lte: (v1, v2) => v1 <= v2,
    gte: (v1, v2) => v1 >= v2,
    and() {
        return Array.prototype.every.call(arguments, Boolean);
    },
    or() {
        return Array.prototype.slice.call(arguments, 0, -1).some(Boolean);
    }
});

가장자리에 사는 분들을 위해 한 단계 더 올라갑니다.

gig: https://gist.github.com/akhoury/9118682 데모: 코드 스니펫은 다음과 같습니다.

바 들들바 handle handle handle:`{{#xif EXPRESSION}} {{else}} {{/xif}}`

어떤 식으로든 IF 스테이트먼트를 실행하는 도우미

EXPRESSION은 올바르게 이스케이프된 문자열입니다.
예, 문자열 리터럴을 올바르게 이스케이프하거나 단일 따옴표와 이중 따옴표를 번갈아 사용해야 합니다.
모든 글로벌 기능 또는 자산에 액세스할 수 있습니다. encodeURIComponent(property)
에서는 이 하고 있습니다.template( {name: 'Sam', age: '20' } ), 표시age는 입니다.string할 수 하기 parseInt()

사용방법:

<p>
 {{#xif " name == 'Sam' && age === '12' " }}
   BOOM
 {{else}}
   BAMM
 {{/xif}}
</p>

산출량

<p>
  BOOM
</p>

JavaScript: (다른 도우미에 따라 달라집니다.계속 읽어주세요)

 Handlebars.registerHelper("xif", function (expression, options) {
    return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
  });

바 들들바 handle handle handle:`{{x EXPRESSION}}`

javascript 식을 실행하는 도우미

EXPRESSION은 올바르게 이스케이프된 문자열입니다.
예, 문자열 리터럴을 올바르게 이스케이프하거나 단일 따옴표와 이중 따옴표를 번갈아 사용해야 합니다.
모든 글로벌 기능 또는 자산에 액세스할 수 있습니다. parseInt(property)
에서는 이 하고 있습니다.template( {name: 'Sam', age: '20' } ),age는 입니다.string데모 목적이라면 무엇이든 될 수 있습니다.

사용방법:

<p>Url: {{x "'hi' + name + ', ' + window.location.href + ' <---- this is your href,' + ' your Age is:' + parseInt(this.age, 10)"}}</p>

출력:

<p>Url: hi Sam, http://example.com <---- this is your href, your Age is: 20</p>

JavaScript:

명확성을 위해 구문을 확장하고 거의 각 행에 코멘트를 달았기 때문에 조금 커 보입니다.

Handlebars.registerHelper("x", function(expression, options) {
  var result;

  // you can change the context, or merge it with options.data, options.hash
  var context = this;

  // yup, i use 'with' here to expose the context's properties as block variables
  // you don't need to do {{x 'this.age + 2'}}
  // but you can also do {{x 'age + 2'}}
  // HOWEVER including an UNINITIALIZED var in a expression will return undefined as the result.
  with(context) {
    result = (function() {
      try {
        return eval(expression);
      } catch (e) {
        console.warn('•Expression: {{x \'' + expression + '\'}}\n•JS-Error: ', e, '\n•Context: ', context);
      }
    }).call(context); // to make eval's lexical this=context
  }
  return result;
});

Handlebars.registerHelper("xif", function(expression, options) {
  return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});

var data = [{
  firstName: 'Joan',
  age: '21',
  email: 'joan@aaa.bbb'
}, {
  firstName: 'Sam',
  age: '18',
  email: 'sam@aaa.bbb'
}, {
  firstName: 'Perter',
  lastName: 'Smith',
  age: '25',
  email: 'joseph@aaa.bbb'
}];

var source = $("#template").html();
var template = Handlebars.compile(source);
$("#main").html(template(data));

h1 {
  font-size: large;
}
.content {
  padding: 10px;
}
.person {
  padding: 5px;
  margin: 5px;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>

<script id="template" type="text/x-handlebars-template">
  <div class="content">
    {{#each this}}
    <div class="person">
      <h1>{{x  "'Hi ' + firstName"}}, {{x 'lastName'}}</h1>
      <div>{{x '"you were born in " + ((new Date()).getFullYear() - parseInt(this.age, 10)) '}}</div>
      {{#xif 'parseInt(age) >= 21'}} login here:
      <a href="http://foo.bar?email={{x 'encodeURIComponent(email)'}}">
        	http://foo.bar?email={{x 'encodeURIComponent(email)'}}
        </a>
      {{else}} Please go back when you grow up. {{/xif}}
    </div>
    {{/each}}
  </div>
</script>

<div id="main"></div>

모아

상위 레벨의 스코프에 액세스 하는 경우는, 이것은 약간 다릅니다.식으로는 모든 인수의 JOIN 이 됩니다.사용방법: 컨텍스트데이터는 다음과 같습니다.

// data
{name: 'Sam', age: '20', address: { city: 'yomomaz' } }

// in template
// notice how the expression wrap all the string with quotes, and even the variables
// as they will become strings by the time they hit the helper
// play with it, you will immediately see the errored expressions and figure it out

{{#with address}}
    {{z '"hi " + "' ../this.name '" + " you live with " + "' city '"' }}
{{/with}}

Javascript:

Handlebars.registerHelper("z", function () {
    var options = arguments[arguments.length - 1]
    delete arguments[arguments.length - 1];
    return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]);
});

Handlebars.registerHelper("zif", function () {
    var options = arguments[arguments.length - 1]
    delete arguments[arguments.length - 1];
    return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]) ? options.fn(this) : options.inverse(this);
});

도우미 기능을 쓰지 않고 간단하게 할 수 있는 방법이 있습니다.템플릿 내에서 완전히 수행할 수 있습니다.

{{#if cond1}}   
  {{#if con2}}   
    <div> and condition completed</div>  
  {{/if}}
{{else}}   
  <div> both conditions weren't true</div>  
{{/if}}

편집: 반대로 다음과 같이 할 수 있습니다.

{{#if cond1}}  
  <div> or condition completed</div>    
{{else}}   
  {{#if cond2}}  
    <div> or condition completed</div>  
  {{else}}      
    <div> neither of the conditions were true</div>    
  {{/if}}  
{{/if}}

편집/주의:핸들 바의 웹 사이트(handlebarsjs.com)에서 위변조 값을 확인할 수 있습니다.

if 도우미를 사용하여 블록을 조건부로 렌더링할 수 있습니다.해당 인수가 false, defined, null, "" 또는 []("falsy" 값)을 반환하는 경우 cond1 또는 cond2와 같은 모든 cond는 true로 카운트되지 않습니다.

여기에 게재된 모든 답변의 문제 중 하나는 바인딩된 속성(즉, 관련된 속성이 변경되었을 때 조건이 재평가되지 않는 경우)에서 작동하지 않는다는 것입니다.다음은 바인딩을 지원하는 도우미의 고급 버전입니다.또한 일반 Ember를 구현하기 위해 사용되는 Ember 소스로부터의 바인드 함수를 사용합니다.#if헬퍼

이것은 왼쪽의 단일 바인딩 속성으로 제한되며 오른쪽의 상수에 비해 대부분의 실용적인 목적에 충분하다고 생각합니다.보다 더 된 것이 , 몇 하는 것이 .#if대신 도우미를 불러주세요.

Ember.Handlebars.registerHelper('ifeq', function(a, b, options) {
  return Ember.Handlebars.bind.call(options.contexts[0], a, options, true, function(result) {
    return result === b;
  });
});

다음과 같이 사용할 수 있습니다.

{{#ifeq obj.some.property "something"}}
  They are equal!
{{/ifeq}}

기본적으로 모든 바이너리 연산자와 함께 작동하는 개선된 솔루션(적어도 숫자, 문자열은 eval에서 제대로 작동하지 않습니다. 사용자 입력과 함께 정의되지 않은 연산자를 사용하는 경우 가능한 스크립트 주입에 주의하십시오):

Handlebars.registerHelper("ifCond",function(v1,operator,v2,options) {
    switch (operator)
    {
        case "==":
            return (v1==v2)?options.fn(this):options.inverse(this);

        case "!=":
            return (v1!=v2)?options.fn(this):options.inverse(this);

        case "===":
            return (v1===v2)?options.fn(this):options.inverse(this);

        case "!==":
            return (v1!==v2)?options.fn(this):options.inverse(this);

        case "&&":
            return (v1&&v2)?options.fn(this):options.inverse(this);

        case "||":
            return (v1||v2)?options.fn(this):options.inverse(this);

        case "<":
            return (v1<v2)?options.fn(this):options.inverse(this);

        case "<=":
            return (v1<=v2)?options.fn(this):options.inverse(this);

        case ">":
            return (v1>v2)?options.fn(this):options.inverse(this);

        case ">=":
         return (v1>=v2)?options.fn(this):options.inverse(this);

        default:
            return eval(""+v1+operator+v2)?options.fn(this):options.inverse(this);
    }
});

여러 조건을 체크하는 경우의 해결 방법은 다음과 같습니다.

/* Handler to check multiple conditions
   */
  Handlebars.registerHelper('checkIf', function (v1,o1,v2,mainOperator,v3,o2,v4,options) {
      var operators = {
           '==': function(a, b){ return a==b},
           '===': function(a, b){ return a===b},
           '!=': function(a, b){ return a!=b},
           '!==': function(a, b){ return a!==b},
           '<': function(a, b){ return a<b},
           '<=': function(a, b){ return a<=b},
           '>': function(a, b){ return a>b},
           '>=': function(a, b){ return a>=b},
           '&&': function(a, b){ return a&&b},
           '||': function(a, b){ return a||b},
        }
      var a1 = operators[o1](v1,v2);
      var a2 = operators[o2](v3,v4);
      var isTrue = operators[mainOperator](a1, a2);
      return isTrue ? options.fn(this) : options.inverse(this);
  });

사용방법:

/* if(list.length>0 && public){}*/

{{#checkIf list.length '>' 0 '&&' public '==' true}} <p>condition satisfied</p>{{/checkIf}}

사용하고 있는 블록 도우미에 대한 링크: 비교 블록 도우미.모든 표준 연산자를 지원하며 아래와 같이 코드를 작성할 수 있습니다.정말 편리하네요.

{{#compare Database.Tables.Count ">" 5}}
There are more than 5 tables
{{/compare}}

다음 명령을 실행하여 Ember True Helpers 애드온을 설치합니다.

ember install ember-truth-discription

대부분의 논리 연산자(eq, not-eq, not, and, gt, gte,lt,lt,snot,xor)를 사용할 수 있습니다.

{{#if (or section1 section2)}}  
...content  
{{/if}}

하위 표현식을 포함하면 더 멀리 갈 수 있습니다.

{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}  
...content  
{{/if}}

하지만 3진 도우미를 위한 또 다른 비뚤어진 해결책은 다음과 같습니다.

'?:' ( condition, first, second ) {
  return condition ? first : second;
}

<span>{{?: fooExists 'found it' 'nope, sorry'}}</span>

또는 단순한 통합 도우미:

'??' ( first, second ) {
  return first ? first : second;
}

<span>{{?? foo bar}}</span>

핸들바 마크업에는 특별한 의미가 없기 때문에 도우미 이름에 자유롭게 사용할 수 있습니다.

Jim의 답변과 비슷하지만 창의력을 조금 발휘하면 다음과 같은 작업을 수행할 수 있습니다.

Handlebars.registerHelper( "compare", function( v1, op, v2, options ) {
        
  var c = {
    "eq": function( v1, v2 ) {
      return v1 == v2;
    },
    "neq": function( v1, v2 ) {
      return v1 != v2;
    },
    ...
  }
        
  if( Object.prototype.hasOwnProperty.call( c, op ) ) {
    return c[ op ].call( this, v1, v2 ) ? options.fn( this ) : options.inverse( this );
  }
  return options.inverse( this );
} );

그 후, 다음과 같은 결과를 얻을 수 있습니다.

{{#compare numberone "eq" numbertwo}}
  do something
{{else}}
  do something else
{{/compare}}

성능 향상을 위해 함수에서 객체를 이동할 것을 제안하지만 그렇지 않으면 "and" 및 "또는"를 포함하여 원하는 비교 기능을 추가할 수 있습니다.

입니다.#if . 。#if는 파라미터가 기능하고 있는지 여부를 검출하고, 기능하고 있는 경우는 그 파라미터를 호출하고, 그 반환값을 트러티니스 체크에 사용합니다.은 현재 를 "myFunction"으로 .this.

{{#if myFunction}}
  I'm Happy!
{{/if}}

유감스럽게도 이러한 솔루션은 "OR" 연산자 "cond1 || cond2"의 문제를 해결하지 않습니다.

첫 번째 값이 참인지 확인합니다.
"^" (또는)를 사용하여 cond2가 true인지 확인합니다.

{{#if cond1}}: 더 액션 {{^}}{#if cond2}}: 더 액션 {{/if}{/if}}{/if}

DRY 규칙을 어깁니다.그러니 부분적인 방법을 써서 덜 지저분하게 만드는 건 어때?

{{#if cond1}}
    {{> subTemplate}}
{{^}}
    {{#if cond2}}
        {{> subTemplate}}
    {{/if}}
{{/if}}

템플릿 내에서 실행할 수 있는 다양한 비교가 많은 상황에서 도우미를 작성하는 이유는 이해할 수 있지만 비교 수가 비교적 적은 경우(혹은 처음부터 이 페이지로 이동한 경우)에 새로운 핸들 바를 정의하는 것이 더 쉬울 수 있습니다.다음과 같은 뷰 표시 기능 호출:

렌더에서 핸들 바에 전달:

var context= {
    'section1' : section1,
    'section2' : section2,
    'section1or2' : (section1)||(section2)
};

핸들 바 템플릿 내에서 다음을 수행합니다.

{{#if section1or2}}
    .. content
{{/if}}

단순함을 위해, 그리고 핸들바의 논리를 따르면서도 빠르고 도움이 될 수 있는 답변이기 때문에 언급합니다.

핸들바에 도움이 되는 도우미가 많은 커피스크립트로 만든 npm 패키지를 찾았습니다.다음의 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"}}

AND/OR의 올바른 솔루션

Handlebars.registerHelper('and', function () {
    // Get function args and remove last one (function name)
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});
Handlebars.registerHelper('or', function () {
    // Get function args and remove last one (function name)
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
});

그럼 다음과 같이 전화하세요.

{{#if (or (eq questionType 'STARTTIME') (eq questionType 'ENDTIME') (..) ) }}

여기 제시된 해법은 틀렸습니다.그는 마지막 인수인 함수 이름을 뺀 것이 아닙니다.https://stackoverflow.com/a/31632215/1005607

그의 원래 AND/OR은 모든 논쟁 목록을 기반으로 했다.

   and: function () {
        return Array.prototype.slice.call(arguments).every(Boolean);
    },
    or: function () {
        return Array.prototype.slice.call(arguments).some(Boolean);
    }

누가 그 답을 바꿀 수 있나요?86명이 추천한 답을 고치느라 1시간을 허비했어요.수정은 마지막 인수인 함수 이름을 필터링하는 것입니다. Array.prototype.slice.call(arguments, 0, arguments.length - 1)

하나 또는 다른 요소가 존재하는지 확인하고 싶다면 이 커스텀 도우미를 사용할 수 있습니다.

Handlebars.registerHelper('if_or', function(elem1, elem2, options) {
  if (Handlebars.Utils.isEmpty(elem1) && Handlebars.Utils.isEmpty(elem2)) {
    return options.inverse(this);
  } else {
    return options.fn(this);
  }
});

이것처럼.

{{#if_or elem1 elem2}}
  {{elem1}} or {{elem2}} are present
{{else}}
  not present
{{/if_or}}

함수의 반환값을 비교할 수 있는 "또는"이 필요한 경우 원하는 결과를 반환하는 다른 속성을 추가합니다.

템플릿은 논리가 없어야 합니다!

오브젝트 속성을 비교하는 데 문제가 있는 경우 도우미 내부에 이 솔루션을 추가합니다.

Ember.js 도우미가 매개 변수를 제대로 인식하지 못했습니다.

문자열이 다른 문자열과 동일한지 확인하는 방법에 대한 구글 검색에서 방금 이 게시물에 왔습니다.

핸들 바 사용노드의 JSJS 서버 측이지만 핸들바의 브라우저 버전을 사용하여 프런트 엔드에서 동일한 템플릿 파일을 사용합니다.해석하는 JS.즉, 커스텀 도우미를 원할 경우, 2개의 장소에서 정의하거나 해당 오브젝트에 함수를 할당해야 합니다.너무 노력했습니다!!

사람들이 잊고 있는 것은 특정 오브젝트에는 콧수염 템플릿에서 사용할 수 있는 기능이 상속되어 있다는 것입니다.문자열의 경우:

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일치하는 것을 찾을 수 없는 경우이건 완벽해 왜냐하면 핸들 바를 보면JS 매뉴얼 http://handlebarsjs.com/builtin_helpers.html

You 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.

그래서...

{{#if your_string.match "what_youre_looking_for"}} 
String found :)
{{else}}
No match found :(
{{/if}}

갱신:

모든 브라우저에서 테스트한 후 Firefox에서 작동하지 않습니다.핸들바JS는 다른 인수를 함수 호출에 전달합니다.즉, String.protype.match가 호출되면 두 번째 인수(즉, 위의 설명서에 따라 일치 함수 호출의 Regexp 플래그)가 전달되고 있는 것처럼 보입니다.Firefox는 이를 String.protype.match를 사용하지 않는 것으로 간주하므로 중단됩니다.

회피책은 String JS 객체의 새로운 기능 프로토타입을 선언하고 대신 그것을 사용하는 것입니다.

if(typeof String.includes !== 'function') {
    String.prototype.includes = function(str) {
        if(!(str instanceof RegExp))
            str = new RegExp((str+'').escapeRegExp(),'g');
        return str.test(this);
    }
}

Handlebars.compile() 함수를 실행하기 전에 이 JS 코드가 포함되어 있는지 확인한 후 템플릿에...

{{#your_string}}
    {{#if (includes "what_youre_looking_for")}} 
        String found :)
    {{else}}
        No match found :(
    {{/if}}
{{/your_string}}

다음과 같이 논리 연산자를 사용하면 간단히 수행할 수 있습니다.

{{#if (or(eq firstValue 'String_to_compare_value') (eq secondValue 'String_to_compare_value'))}}business logic goes here{{/if}}

{{#if (and(eq firstValue 'String_to_compare_value') (eq secondValue 'String_to_compare_value'))}}business logic goes here{{/if}}

종료하기 전에 비즈니스 로직을 작성할 수 있는 경우

여기에서는 복수의 논리 & & | | (또는 )용 바닐라 핸들바를 준비하고 있습니다.

Handlebars.registerHelper("and",function() {
    var args = Array.prototype.slice.call(arguments);
    var options = args[args.length-1];

    for(var i=0; i<args.length-1; i++){
        if( !args[i] ){
            return options.inverse(this);
        }
    }

    return options.fn(this);
});


Handlebars.registerHelper("or",function() {
    var args = Array.prototype.slice.call(arguments);
    var options = args[args.length-1];

    for(var i=0; i<args.length-1; i++){
        if( args[i] ){
            return options.fn(this);
        }
    }

    return options.inverse(this);
}

// Results
// {{#and foo bar sally bob}} yup {{else}} nope {{/and}} // yup
// {{#or foo bar "" sally bob}} yup {{else}} nope {{/or}} // yup

// {{#and foo bar "" sally bob}} yup {{else}} nope {{/and}} // nope
// {{#or "" "" "" "" ""}} yup {{else}} nope {{/or}} // nope

'and'나 'or'를 쓰는 게 안전한지 잘 모르겠어 'op_and'나 'op_or'로 바꿀 수도 있지 않을까?

이들 2가지 가이드의 a-way-to-let-users-define-custom-bound-if 스테이트먼트 및 커스텀바인드 도우미에 따라 stackoverflow에 대한 이 투고에서 공유 뷰를 조정하여 표준 #if 스테이트먼트 대신 사용할 수 있었습니다.그냥 #if를 넣는 것보다 더 안전할 거예요.

그 요지의 맞춤 도우미들은 탁월하다.

<li>
    <a href="{{unbound view.varProductSocialBlog}}">
        {{#if-equal view.showDiv "true"}}<div>{{/if-equal}}<i class="fa fa-rss-square"></i>{{#if-equal view.showDiv "true"}}</div>{{/if-equal}}
        {{#if-equal view.showTitle "true"}}Blog{{/if-equal}}
    </a>
</li>

ember cli 프로젝트를 사용하여 ember 어플리케이션을 빌드하고 있습니다.

이 투고 시의 현재 설정:

DEBUG: -------------------------------
DEBUG: Ember      : 1.5.1
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 2.1.1
DEBUG: -------------------------------

Ember.js에서는 if block helper에서 inline if helper를 사용할 수 있습니다.대체할 수 있습니다.||논리 연산자(예:

{{#if (if firstCondition firstCondition secondCondition)}}
  (firstCondition || (or) secondCondition) === true
{{/if}}

다음의 코드를 사용할 수 있습니다.

{{#if selection1}}
    doSomething1
{{else}}
   {{#if selection2}}
       doSomething2
   {{/if}}
{{/if}}

핸들 바 템플릿에는 식을 쓸 수 없지만 모든 논리(의견)는 express로 쓸 수 있습니다.

app.module

res.render("view.hbs", {expression: section1 || section2})

표시.hbs

{{#if expression}}
  <h1> My Expression Returned True </h1>
{{ else }}
  <h2>My Expression Returned False</h2>
{{/if}} <!-- End IF -->

다음은 ember 1.10 및 ember-cli 2.0에 사용하는 방법입니다.

// app/helpers/js-x.js
export default Ember.HTMLBars.makeBoundHelper(function (params) {
  var paramNames = params.slice(1).map(function(val, idx) { return "p" + idx; });
  var func = Function.apply(this, paramNames.concat("return " + params[0] + ";"))
  return func.apply(params[1] === undefined ? this : params[1], params.slice(1));
});

그런 다음 템플릿에서 다음과 같이 사용할 수 있습니다.

// used as sub-expression
{{#each item in model}}
  {{#if (js-x "this.section1 || this.section2" item)}}
  {{/if}}
{{/each}}

// used normally
{{js-x "p0 || p1" model.name model.offer.name}}

식에 대한 인수는 다음과 같이 전달됩니다.p0,p1,p2기타 및p0라고도 할 수 있다this.

언급URL : https://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional

'programing' 카테고리의 다른 글

Python에서 여러 줄의 코멘트를 작성하려면 어떻게 해야 하나요? (0)	2023.01.13
중첩된 사전을 구현하는 가장 좋은 방법은 무엇입니까? (0)	2023.01.13
현재 날짜의 타임스탬프가 있는 행을 선택하려면 어떻게 해야 합니까? (0)	2023.01.13
경고/오류 "함수 선언은 프로토타입이 아닙니다" (0)	2023.01.13
개체의 첫 번째 인덱스 가져오기 (0)	2023.01.13

현재글핸들바.js {{#if}} 조건부 논리 연산자

각종 프로그래밍 정보를 다루는 블로그입니다.

json, MySQL, ASP.NET, Git, Vuex, C, Excel, mariadb, java, Python, vuejs2, Wordpress, php, spring-boot, angularjs, SQL-Server, jquery, Oracle, ReactJS, javascript,

Today :
Yesterday :

goodsource

핸들바.js {{#if}} 조건부 논리 연산자

핸들바.js {{#if}} 조건부 논리 연산자

바 들들바 handle handle handle:`{{#xif EXPRESSION}} {{else}} {{/xif}}`

어떤 식으로든 IF 스테이트먼트를 실행하는 도우미

사용방법:

산출량

JavaScript: (다른 도우미에 따라 달라집니다.계속 읽어주세요)

바 들들바 handle handle handle:`{{x EXPRESSION}}`

javascript 식을 실행하는 도우미

사용방법:

출력:

JavaScript:

모아

Javascript:

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

핸들바.js {{#if}} 조건부 논리 연산자

핸들바.js {{#if}} 조건부 논리 연산자

바 들들바 handle handle handle:{{#xif EXPRESSION}} {{else}} {{/xif}}

어떤 식으로든 IF 스테이트먼트를 실행하는 도우미

사용방법:

산출량

JavaScript: (다른 도우미에 따라 달라집니다.계속 읽어주세요)

바 들들바 handle handle handle:{{x EXPRESSION}}

javascript 식을 실행하는 도우미

사용방법:

출력:

JavaScript:

모아

Javascript:

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바

바 들들바 handle handle handle:`{{#xif EXPRESSION}} {{else}} {{/xif}}`

바 들들바 handle handle handle:`{{x EXPRESSION}}`