web-dev-qa-db-ja.com

Handlebarsjsは、文字列が値と等しいかどうかをチェックします

Handlebarsでは、ヘルパーを登録せずに文字列が別の値と等しいかどうかを確認できますか？ Handlebarsリファレンスでこれに関連するものを見つけることができないようです。

例えば：

{{#if sampleString == "This is a string"}}
...do something
{{/if}}
stringhandlebars.jslogical-operators
28
colmulhall

「直接」はできないようです

ヘルパーを使用してみてください、なぜですか？

JavaScriptコードでヘルパーを登録します。

Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
    return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
});

テンプレートで使用：

{{#ifEquals sampleString "This is a string"}}
    Your HTML here
{{/ifEquals}}

詳細はこちら： handlebars.jsの論理演算子{{#if}}条件付き

UPD：別の方法：

あなたのデータは次のとおりです。

var data = {
    sampleString: 'This is a string'
};

次に（jQueryを使用）：

$.extend(data, {isSampleString: function() {
    return this.sampleString ==  'This is a string';}
});

使用テンプレート：

{{#if isSampleString}}
    Your HTML here
{{/if}}
39
Mihail

私はこのようなヘルパーを使用します：

Handlebars.registerHelper('ifeq', function (a, b, options) {
    if (a == b) { return options.fn(this); }
    return options.inverse(this);
});

Handlebars.registerHelper('ifnoteq', function (a, b, options) {
    if (a != b) { return options.fn(this); }
    return options.inverse(this);
});

次に、コードで：

{{#ifeq variable "string"}} 
    ... do this ... 
{{/ifeq}}
{{#ifnoteq variable "string"}} 
    ... do this ... 
{{/ifnoteq}}
8
Pablo Varando

matchを使用した前の回答は私には機能しません。ifステートメントでエラーが発生します（ ' 1つの引数」）。

しかし、私は解決策を見つけました here これ以上ヘルパーを書く必要はありません：

{{#if (eq person "John")}} hello {{/if}}
4
Kerhael

文字列が別の文字列と等しいかどうかを確認する方法についてのGoogle検索からこの投稿に来ました。

NodeJSサーバーサイドでHandlebarsJSを使用しますが、ブラウザーバージョンのHandlebarsJSを使用してフロントエンドで同じテンプレートファイルを使用して解析します。つまり、カスタムヘルパーが必要な場合は、2つの別々の場所で定義するか、問題のオブジェクトに関数を割り当てる必要があります。

人々が忘れているのは、特定のオブジェクトが口ひげテンプレートで使用できる関数を継承していることです。文字列の場合：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

一致結果全体と、括弧で囲まれた一致結果を含む配列。一致しなかった場合はnull。

このメソッドを使用して、一致の配列を返すか、一致が見つからなかった場合はnullを返すことができます。これは最適です。HandlebarsJSのドキュメントを見ると http://handlebarsjs.com/builtin_helpers.html

Ifヘルパーを使用して、条件付きでブロックをレンダリングできます。引数がfalse、undefined、null、 ""、0、または[]を返す場合、Handlebarsはブロックをレンダリングしません。

そう...

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

UPDATE：

すべてのブラウザでテストした後、これはFirefoxでは動作しません。 HandlebarsJSは、他の引数を関数呼び出しに渡します。つまり、String.prototype.matchが呼び出されると、2番目の引数（つまり、上記のドキュメントによるmatch関数呼び出しのRegexpフラグ）が渡されているように見えます。 Firefoxは、これをString.prototype.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);
    }
}

このJSコードが含まれていることを確認してくださいbefore、Handlebars.compile（）関数を実行してからテンプレートで...

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

eqヘルパーを提供する handlebars-helpers を使用します

1
Vic Seedoubleyew

Node.jsはこれをserver.jsに追加します

const isEqual = function(a, b, opts) {
  if (a == b) {
    return opts.fn(this) 
  } else { 
    return opts.inverse(this) 
  } 
}

var hbs = require('hbs');
hbs.registerHelper('if_eq', isEqual);
1
user11258971

ハンドルバーの文字列を直接比較することはできず、ヘルパーを使用する必要があります。 Koaアプリで上記のソリューションを試しましたが、ヘルパーを登録できませんでした。以下のコードは私にとってはうまくいきましたが、これはエクスプレスアプリでもうまくいくはずです。これが誰かの助けになることを願っています。

server.jsのコード

var handlebars = require('koa-handlebars');

const isEqualHelperHandlerbar = function(a, b, opts) {
            if (a == b) {
                return opts.fn(this) 
            } else { 
                return opts.inverse(this) 
            } 
        }
        
app.use(handlebars({
    viewsDir: './app/views',
    layoutsDir: './app/views/layouts',
    defaultLayout: 'main',
    helpers : {
        if_equal : isEqualHelperHandlerbar
    }
}));

fruitが比較される変数であるHBSファイルのコード：

 <select id={{fruit}}>
   <option >Choose...</option>
   <option value="Apple" {{#if_equal fruit "Apple"}} selected {{/if_equal}}>Apple</option>
   <option value="mango" {{#if_equal fruit "mango"}} selected {{/if_equal}} >Mango</option>
 </select>
1
Ojus sangoi

試してください：

{{#is item.status "complete"}} ... {{/ is}}

0
user2662680

私はOPと同じ困難を抱えていたため、ハンドルバーを思いのままに曲げようとするのではなく、Javascriptへの呼び出しをサブレットにするだけでした...

Javascript関数（グローバルスコープ内）-

function jsIfElse(compare1, compare2, trueResponse, falseResponse) {
  document.write((compare1 == compare2) ? trueResponse : falseResponse);
}

ハンドルバースニペット-

<select multiple id="batter_player_team">
  {{#each teamNamesForFilter}}
  <option value="{{this.id}}">                     <script>jsIfElse('{{this.is_active}}','Y','{{this.name}} *', '{{this.name}}');</script>
  </option>
   {{/each}} 
</select>
0
Mike Neugebauer

単純で再利用可能なヘルパー関数の一般的なケースは、値が等しい場合にstring1を返し、等しくない場合にstring2を返すことです。

例：

ヘルパー（「ifEqual」と呼び、4つのパラメーターを送信しましょう）：

helpers: {

    ifEqual: function (obj, value, trueString, falseString) {
            return ( (obj===value) ? trueString : falseString );
}

テンプレートの使用：

この例では、テンプレートが「transactionType」プロパティを持つ「transaction」オブジェクトを受け取ると仮定します：{ transactionType: "expense", description: "Copies" }

テンプレートにトランザクションタイプの<select>があり、示されているようにさまざまな<option>sがあるとします。ハンドルバーを使用して、transactionTypeの値と一致するオプションを事前選択します。

新しい{{ ifEqual }}ヘルパーを使用して、<option>に「選択済み」を挿入し、値が「expense」に一致するようにします。

<select required id="selTransactionType" name="selTransactionType" class="form-control" onchange='transactionTypeChanged()'>
   <option value='hourly' {{ ifEqual transaction.transactionType "hourly" "selected" "" }} >Hourly fee</option>
   <option value='flat' {{ ifEqual transaction.transactionType "flat" "selected" "" }} >Flat fee</option>
   <option value='expense' {{ ifEqual transaction.transactionType "expense" "selected" "" }} >Expense</option>
   <option value='payment' {{ ifEqual transaction.transactionType "payment" "selected" "" }} >Payment</option>
   <option value='credit' {{ ifEqual transaction.transactionType "credit" "selected" "" }} >Credit</option>
   <option value='debit' {{ ifEqual transaction.transactionType "debit" "selected" "" }} >Debit</option>
</select>
0
Jeff Matthews

Handlebarsでは、括弧は関数としてリストされた最初の項目を呼び出すために使用され、（オプションの）後続の項目をパラメーターとして使用します。したがって、Emberからの構文は、コンテキストを自分で設定できる場合は、Emberなしで使用できます。たとえば、次のようになります。

    context.eq = function(param1, param2) {
        return param1 === param2;
    }

    context.notEq = function(param1, param2) {
        return param1 !== param2;
    }

それができたら、標準の{{#if}}および{{#unless}}ブロック操作を使用できます。

{{#if (eq someVar "someValue") }}

{{with}}を使用してコンテキストを切り替える場合、またはインラインパーシャルを使用する場合は注意してください。定義した「eq」関数を追跡できなくなる場合があります。新しいコンテキストに関係なく、保証された動作方法：

{{#if (@root.eq someVar "someValue") }}
0
Joel Kozikowski