63

私はMeteorを実験していて、理解できない何かに遭遇しました。楽しみのために、私はスロットマシンを作ろうとしていました。私は次のHTMLを持っていました：

<div class="slot-wrapper">
  {{> slot}}
  {{> slot}}
  {{> slot}}
</div>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{ number }}</span></div>
    <div class="divider"></div>
  </div>
</template>

スロットごとに異なる番号が必要です。テンプレートに変数を渡すことは可能ですか？このようなもの：

<div class="slot-wrapper">
  {{> slot 1}}
  {{> slot 2}}
  {{> slot 3}}
</div>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{ number i}}</span></div>
    <div class="divider"></div>
  </div>
</template>

たぶん私はこれを間違った方法で考えていて、もっと良い方法があります。

4

9 に答える 9

14

別の方法があることが判明しました。

さまざまな検索をグーグルで検索してこれを行う方法を見つけようとしていたところ、この質問が見つかりましたが、私の目的に合ったものは何もありませんでした. ネストされたテンプレートを親テンプレートの別の場所に配置しない限り、TomUnite の回答は機能します。

そのため、多くの検索を行った後、隕石のコードベースで「ある」答えを見つけました。（それが決定的な答えだと言っているわけではありませんが、うまくいきます）

<template name="slots">
  {{> slot one}}
  <div>..something else</div>
  {{> slot three}}
  {{> slot two}}
</template>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{number}}</span></div>
    <div class="divider"></div>
  </div>
</template>

ご覧のとおり、テンプレート インスタンスを任意の順序で指定できます。2 番目のパラメーターは、実際には定義する必要がある変数なので、次のようになります。

Template.slots.one = {
  number: 1
}
Template.slots.two = {
  number: 2
}
Template.slots.three = {
  number: 3
}

これは、ループまたはスロット オブジェクトで underscore.js 関数 _.extend を使用して、より簡潔なコードにすることができます。また、複数のデータ フィールドをこれらのオブジェクトに渡すことができます。

于 2012-10-28T09:59:19.147 に答える
9

Jocの答えを明確にするだけなので、これをコメントとして残したかったのですが、できなかったので、ここに加えて、私が使用した例を示します。

テンプレートに渡すことができる引数は 1 つだけです。

{{> singleItemInfo arg1}}

この引数は次のようなオブジェクトでなければなりません:

{
    number: 1,
    number2: 2,
    numberComposite: {
        subnum1: 10,
        subnum2: 20
    }
};

引数値にはキーを介してアクセスでき、スコープを切り替えてサブアイテムを取得できます

{{#with numberComposite}}

この例の完全なコードは次のとおりです。

<htmlファイル>

<body>
    {{ itemsView }}
</body>

<template name="itemsView">
    {{> singleItemInfo arg1}}
</template>

<template name="singleItemInfo">
    arg1 = {{ number }}
    arg2 = {{ number2 }} 
    {{#with numberComposite}}
        subArg1 = {{ subnum1 }}
        subArg2 = {{ subnum2 }}
    {{/with}}
</template>

<javascriptファイル>

Template.itemsView.arg1 = {
    number: 1,
    number2: 2,
    numberComposite: {
        subnum1: 10,
        subnum2: 20
    }
};

出力：

arg1 = 1 arg2 = 2 subArg1 = 10 subArg2 = 20
于 2012-11-02T02:47:28.423 に答える
5

より良い答え:

新しい Blaze レイアウトでテンプレートをコンテキスト依存にするために使用できる 2 つのソリューションは次のとおりです。

1) テンプレートに引数を直接渡す

{{> contextSensitiveTemplate  context_1='x' context_2='y' }}

2) コンテキストを理解するテンプレートでヘルパーを使用する。次のようにヘルパーを呼び出します。

{{ contextHelperName ../.. .. this }}

と

Template.contextSensitiveTemplate.contextHelperName = function(parent_template, current_template, current_value_inside_each_loop) {
  return context_dependent_value_or_html     
}
于 2014-08-04T09:53:46.910 に答える
3

これは私がそれを達成するためにしたことです。私はMeteorにかなり慣れていないので、もっと良い方法があるかもしれません：

Slot.html：

<head>
  <title>Slot</title>
</head>

<body>
  <div class="slot-wrapper">
    {{> slots}}
  </div>
</body>

<template name="slots">
  {{#each slots}}
    {{> slot}}
  {{/each}}
</template>

<template name="slot">
  <div class="slot">
    <div class="number"><span>{{number}}</span></div>
    <div class="divider"></div>
  </div>
</template>

Slot.js：

if (Meteor.is_client) {
  Template.slots.slots = function () {
    var returnArray = new Array();
    returnArray[0] = { 'number': 10 };
    returnArray[1] = { 'number': 87 };
    returnArray[2] = { 'number': 41 };
    return returnArray;
  };
}

if (Meteor.is_server) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

これがあなたの助けになったといいのですが！

于 2012-04-12T17:57:18.233 に答える
0

ここにはたくさんの良い情報があります。私の特定の状況は、いくつかのテンプレートデータも渡したいということです。

子 Blaze コンポーネントを再利用可能にしたいので、すべてのデータを渡す必要があります。例として、このコンポーネントがグレード (A、B、C など) を示しているとします。ページ上で、コンポーネントを 2 回使用したいと考えています。あなたの成績とクラスメートの平均成績です。

これが子コンポーネントです...

Grade.html

<template name="Grade">
    <h3>{{title}}</h3>
    <div>{{grade}}</h3>
</template>

タイトルは親でハードコーディングできますが、グレードはデータベースから取得されます。これが私が親をコーディングする方法です...

GradePage.html

<template name="GradePage">
    {{> Grade grade=gradeYours title="Your Grade" }}
    {{> Grade grade=gradeClass title="Class Grade" }}
</template>

GradePage.js (実際にはリアクティブですが、ここでは簡略化されています)

Template.GradePage.helpers({
    gradeYours: function () {
        return 'A-';
    },
    gradeClass: function () {
        return 'B+';
    }
});

それでおしまい。子コンポーネントは、その値を取得するために手を差し伸べる必要はまったくありません。

于 2016-05-16T00:57:11.653 に答える
0

この情報は古くなっています。引数を渡す方法については、Blaze レイアウト エンジンについて詳しく説明されています: https://www.discovermeteor.com/blog/spacebars-secrets-exploring-meteor-new-templating-engine/

于 2014-07-23T10:04:30.653 に答える