19

私は非常に単純なタスクであるべきだと思うことをやろうとしていますが、過去1時間で失敗しています. ユーザー プロパティが値と一致する場合、デフォルトで選択オプションを選択したいと考えています。

<select name="myName">
  {{#each addKeys myTable}} <!-- addKeys creates variables for keys and values -->
    <option value="{{key}}" {{#if currentUser.property === key}}selected="selected"{{/if}}>{{value}}</option>
  {{/each}}
</select>

今、これは実装するのに十分簡単だと思いました。しかし、スペースバーは否定感嘆符以外の条件演算子を許可しないことが判明したため、等号は問題外です。次に、試すために恐ろしいことを試しました：

テンプレート内myTemplate:

<select name="myName">
  {{#each addKeys myTable}}
    <option value="{{key}}" {{isSelected currentUser.property key}}>{{value}}</option>
  {{/each}}
</select>

でmytemplate.js：

Template.myTemplate.helpers({
  isSelected: function(v1, v2) {
    if (v1 === v2)
      return "selected=\"selected\"";
    return '';
  }
});

このコードは見栄えが悪いだけでなく、機能しません。

Exception in Meteor UI: String contains an invalid character

なぜそんなに単純なことを達成するのが不可能に思えるのか、私には理解できません。私はそこに何か欠けていますか？

4

3 に答える 3

32

スペースバーの{{#if}}ステートメントの概要は次のとおりです

財産

もちろん、最も単純な実装は、スコープ オブジェクトにブール値に評価されるプロパティがある場合です。

たとえば、次の場合：

var item = {
  text: 'hello',
  checked: false
};

次に、次のような if ブロックを評価できます。

class="{{#if checked}}checked{{/if}}"

関数

ここでも関数を評価できます。アイテムに関数を追加するのではなく、ヘルパーに関数を追加すると、渡されるアイテムのデータ コンテキストが継承されます。したがって、次のヘルパーがあるとします。

Template.item.helpers({
    saysHi: function() {
      return this.text === "hi";
    }
});

次に、次のコードを実行できます。

<template name="item">
   {{text}}
   {{#if saysHi}} - Hi Back {{/if}}
</template>

注: ヘルパーの実装は、現在のデータ コンテキストに としてアクセスできますthis。

パラメータ付き関数

次のように、任意の数のパラメーターをヘルパー関数に渡すこともできます。

テンプレート:{{frob a b c verily=true}}
ヘルパー コール:frob(a, b, c, Spacebars.kw({verily: true}))

if ブロックに適用すると、次のことができます。

{{#if equals owner currentUser._id}}
    <button class="delete">&times;</button>
{{/if}}

次に、次のようにテンプレート ヘルパーに追加equalsします。

Template.item.helpers({
    equals: function(v1, v2) {
        return (v1 === v2);
    }
});

ユニバーサル ヘルパー

これはどこでも役立つ一般的なメソッドであるため、再作成するのではなく、すべてのテンプレートに追加する必要があります。

注: 任意のテンプレートで使用できるヘルパーを作成するには、Template.registerHelper.

Template.registerHelper('equals',
    function(v1, v2) {
        return (v1 === v2);
    }
);

ここで構築された IF の各タイプの 1 つを含む MeteorPad で動作するデモを次に示します。

于 2015-02-25T04:02:45.430 に答える
5

これを試して：

あなたのテンプレートで：

<option value={{key}} selected={{isSelected currentUser.property key}}>

次に、ヘルパーにブール値を返させます。

ここでのトピックの詳細: https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected

于 2014-07-09T10:56:37.300 に答える