8

さて、myApp.htmlという名前の独自のファイルにテンプレートがあります。私のテンプレートコードは次のとおりです

<template name="initialInsertion">
  <div class="greeting">Hello there, {{first}} {{last}}!</div>
</template>

次に、ボタンをクリックしてこのテンプレートをDOMに挿入します。ボタンをDOMにレンダリングし、次のようにクリックイベントを関連付けています。

Template.chooseWhatToDo.events = {
  'click .zaButton':function(){
     Meteor.ui.render(function () {
       $("body").append(Template.initialInsertion({first: "Alyssa", last: "Hacker"}));
     })
  }
}

$（ "body"）。appendの部分は明らかに間違っていますが、Template.initialInsertion ...を返すと、そのテンプレートはDOMに挿入されません。パルティア{{>initialInsertion}}を入れてみましたが、最初と最後のセットがまだないため、エラーが発生します...手がかりはありますか？みんなありがとう

4

4 に答える 4

14

流星1.xで

'click .zaButton':function(){
   Blaze.renderWithData(Template.someTemplate, {my: "data"}, $("#parrent-node")[0])
 }

流星で0.8.3

'click .zaButton':function(){
   var t = UI.renderWithData(Template.someTemplate, {my: "data"})
   UI.insert(t, $(".some-parrent-to-append"))
 }
于 2014-08-23T20:44:02.317 に答える
6

最初と最後は最終的にMeteor.Collectionに入りますか？

そうでない場合、私が知っている最も簡単な方法は、データをセッションに入れることです。

Template.chooseWhatToDo.events = {
    'click .zaButton' : function () {
         Session.set('first', 'Alyssa');
         Session.set('last', 'Hacker');
    }
}

次に、次のように定義します。

Template.initialInsertion.first = function () {
  return Session.get('first');
}

Template.initialInsertion.last = function () {
  return Session.get('last');
}

Template.initialInsertion.has_name = function () {
  return Template.initialInsertion.first() && Template.initialInsertion.last();
}

最後に、次のように.htmlテンプレートを調整します。

<template name="initialInsertion">
    {{#if has_name}}
        <div class="greeting">Hello there, {{first}} {{last}}!</div>
    {{/if}}
</template>

これはあなたの質問とは正反対の解決策ですが、「流星の方法」のようです。（基本的に、自分でDOMを操作することを心配する必要はありません。セッション、コレクション、テンプレートシステムを採用するだけです。）ところで、私はまだMeteorを初めて使用するので、これが「Meteorの方法」でない場合は、誰かに知らせてください。 :-)

于 2012-05-01T20:17:27.320 に答える
3

appendステートメント内でMeteor.renderを使用することをお勧めします。また、データをテンプレートに渡す場合は、Template.initialInsertionを無名関数でラップする必要があることに注意してください。これはMeteor.renderが期待するものだからです。私は機能しているように見える同様のことをしています：

Template.chooseWhatToDo.events = {
  'click .zaButton':function(){
    $("body").append(Meteor.render(function() {
      return Template.initialInsertion({first: "Alyssa", last: "Hacker"})
    }));
  }
}

お役に立てれば！

于 2012-09-30T01:51:13.717 に答える
1

ここでの多くの回答は、新しいBlazeエンジンで問題が発生するでしょう。これは、Blazeを使用してMeteor0.8.0で機能するパターンです。

//HTML
<body>
  {{>mainTemplate}}
</body>

//JS Client Initially
var current = Template.initialTemplate;
var currentDep = new Deps.Dependency;

Template.mainTemplate = function()
{
  currentDep.depend();
  return current;
};

function setTemplate( newTemplate )
{
    current = newTemplate;
    currentDep.changed();
};

//Later
setTemplate( Template.someOtherTemplate );

Meteorドキュメントのこのセクションの詳細

于 2014-03-30T18:18:00.037 に答える