2

Meteor アプリでいくつかのコントロール要素を再利用しようとしています。次の 2 つのテンプレートで、さまざまなフォームの表示と送信を切り替えることができます。

<template name='addControl'>
  <img class='add' src='/images/icon-plus.png' />
</template>

<template name='okCancelControl'>
  <img class='submit' src='/images/icon-submit.png' />
  <img class='cancel' src='/images/icon-cancel.png' />
</template>

これらのテンプレートを別のテンプレートで呼び出します。

<template name='insectForm'>
  {{#if editing}}
    <!-- form elements -->
    {{> okCancelControl}}
  {{else}}
    {{> addControl}}
  {{/if}}
</template>

editingSessionブール値です。

コントロールを接続して、フォームを表示、非表示、および「送信」する良い方法は何ですか?

4

2 に答える 2

2

主な問題は、コントロール テンプレート (「送信」イベントが発生する場所) から addInsect テンプレート (データがある場所) を見つけることです。これが私がしたことです：

まず、コントロール:

<template name='addControl'>
  <section class='controls'>
    <span class="add icon-plus"></span>
  </section>
</template>

<template name='okCancelControl'>
  <section class='controls'>
    <span class="submit icon-publish"></span>
    <span class="cancel icon-cancel"></span>
  </section>
</template>

今、JavaScript。クリックするとコールバックが呼び出されるだけです。

Template.addControl.events({
  'click .add': function(event, template) {
    if (this.add != null) {
      this.add(event, template);
    }
  }
});

Template.okCancelControl.events({
  'click .cancel': function(event, template) {
    if (this.cancel != null) {
      this.cancel(event, template);
    }
  },
  'click .submit': function(event, template) {
    if (this.submit != null) {
      this.submit(event, template);
    }
  }
});

次に、ハンドルバーの#withブロック ヘルパーを使用してコールバックを接続しました。

<template name='addInsect'>
  {{#with controlCallbacks}}
    {{#if addingInsect}}
      <section class='form'>
        {{> insectErrors}}
        <label for='scientificName'>Scientific Name <input type='text' id='scientificName' /></label>
        <label for='commonName'>Common Name <input type='text' id='commonName' /></label>
        {{> okCancelControl}}
      </section>
    {{else}}
      {{> addControl}}
    {{/if}}
  {{/with}}
</template>

そして、このフォームに関連するコールバックを作成する対応する JavaScript。

Session.set('addingInsect', false);

Template.addInsect.controlCallbacks = {
  add: function() {
    Session.set('addingInsect', true);
    Session.set('addInsectErrors', null);
  },
  cancel: function() {
    Session.set('addingInsect', false);
    Session.set('addInsectErrors', null);
  },
  submit: function() {
    var attrs, errors;
    attrs = {
      commonName: DomUtils.find(document, 'input#commonName').value,
      scientificName: DomUtils.find(document, 'input#scientificName').value
    };
    errors = Insects.validate(attrs);
    Session.set('addInsectErrors', errors);
    if (errors == null) {
      Session.set('addingInsect', false);
      Meteor.call('newInsect', attrs);
    }
  }
};

Template.addInsect.addingInsect = function() {
  Session.get('addingInsect');
};

Template.addInsect.events = {
  'keyup #scientificName, keyup #commonName': function(event, template) {
    if (event.which === 13) {
      this.submit();
    }
  }
};

送信コールバックでは、addInsect ではなく、okCancelControl のインスタンスであるためではDomUtils.findなく、使用する必要がありました。template.findtemplate

于 2013-01-02T02:10:40.073 に答える
1

これに使えますSession。booleanフォーム フィールドを編集しているかどうかを示すフラグを返すテンプレート ヘルパーが必要です。そして、このテンプレート ヘルパーによって設定されたセッション値に基づいて DOM を操作します。

テキスト入力が 1 つあると仮定します。テキストを入力するときは、Session フラグを に設定しtrueます。これにより、ヘルパーが true を返すようになりますflag。これに基づいて、2 つのテンプレートの 1 つが DOM でレンダリングされます。

これisEditingは、セッション値を変更するたびにトリガーされるヘルパーです。このヘルパー関数はここでの主要部分であり、設定したセッション値に基づいて true/false を返します。

 Template.insectForm.isEditing = function(){
    if(Session.get('isEditing')){
     return true;
    }
    else{
     return false;
    }
 }

false起動時にセッションを次のように設定することを忘れないでください。

$(document).ready(function(){
    Session.set('isEditing', false);
})

これにより、html でデフォルトがレンダリングさadd templateれます。[ADD] をクリックすると、別のテンプレートを表示する必要があります。そのためには、次のように Session を true に設定します。

'click .add' : function(){
    Session.set('isEditing', true);
}

したがって、CANCEL をクリックしてセッションを に設定するとfalse、 がisEditingに戻りfalse、デフォルトadd templateが表示されます。

したがって、完全な html は次のようになります。

<template name='insectForm'>    
  {{#if isEditing}}
    <!-- form elements -->
    <input type="text" id="text" value="">
    {{> okCancelControl}}
  {{else}}
    {{> addControl}}
  {{/if}}
</template>

<template name='addControl'>
  <img class='add' src='/images/icon-plus.png' />
</template>

<template name='okCancelControl'>
  <img class='submit' src='/images/icon-submit.png' />
  <img class='cancel' src='/images/icon-cancel.png' />
</template>

[アップデート]

テンプレートのインスタンスを取得するには、テンプレートを表すイベント ハンドラーで追加のパラメーターを渡す必要があります。

したがって、イベント ハンドラを次のように更新します。

Template.insectForm.events = {
   'click .submit' : function(event, template){
      //your event handling code
   }
}

パラメータtemplateは、イベントの発生元のテンプレートのインスタンスです。

イベントはテンプレート内の画像から発生okCancelControlしますが、パラメータにはテンプレートのインスタンスが含まれていることに注意してinsectFormください。これは、イベント ハンドラを として呼び出しているためTemplate.insectForm.events = {}です。

テンプレートインスタンスについては、この回答も参照してください。

于 2012-12-31T12:38:19.763 に答える