2016-10-31 3 views
1

私は、自動フォームに基づいて流星爆発テンプレートを持っています。テキストの変更時にBlazeテンプレートを再レンダリングする

<template name="patientForm"> 

<div class='mdl-cell mdl-cell--12-col'> 
    {{#autoForm id="insertUpdatePatientForm" collection="Patients" doc=selectedPatientDoc 
    type=formType validation="browser" template="semanticUI"}} 
    <div class='two fields'> 
    {{> afQuickField name="firstName"}} 
    {{> afQuickField name="lastName"}} 
    </div> 
    <div class='two fields'> 
    {{> afQuickField name="phn.type"}} 
    {{> afQuickField name="phn.value" class="ramq"}} 
    </div> 
     <div class='two fields'> 
     {{> afQuickField name="birthDate"}} 
     {{> afQuickField name="gender"}} 
     </div> 

    <button class="ui submit button" type="submit">Save</button> 
    <div class="ui error message"></div> 
    {{/autoForm}} 
</div> 
</template> 

入力用のテキスト変更イベントを名前phn.valueで処理する必要があります。テキストに基づいて、性別と生年月日の2つのフィールドを自動入力したいと思います。私は次のように直接テンプレートデータを変更することでそれをやっています:

Template.patientForm.events({ 
    'change .ramq': function changeRAMQ(event, templateInstance) { 
     const { patient } = templateInstance.data; 
     if (patient.phn.type === 'RAMQ') { 
      const ramq = event.target.value; 
      const yy = parseInt(ramq.substr(4, 2), 10); 
      let mm = parseInt(ramq.substr(6, 2), 10); 
      const dd = parseInt(ramq.substr(8, 2), 10); 
      patient.gender = mm < 13 ? 'Male' : 'Female'; 
      if (mm > 50) { 
       mm -= 50; 
      } 
      patient.birthDate = moment(new Date(yy, mm, dd)).format('YYYY-MM-DD'); 
     } 
    }, 
}); 

私はテンプレートデータを取得し、直接性別や誕生日phn.valueの変更を修正しています。ただし、変更された性別と生年月日は、autoform/blazeテンプレートで再レンダリングされません。 Blazeテンプレートの再レンダリングや、Blazeテンプレートの他のコントロールへの変更を反映させる別の方法を強制することができる方法はありますか?

答えて

1

を反応性とあなたがReactiveVar(またはReactiveDict)を使用する必要がありますフィールドのように再レンダリングを有効にするには

あなたはこのようにこれを行うことができます:

Template.patientForm.onCreated(function(){ 
    const instance = this; 
    instance.birthDate = new ReactiveVar() 
}); 

そして、あなたのヘルパーやイベントであなたがinstance.birthDate.setを(使用することができます)/(取得)が

Template.patientForm.helpers({ 
    birthDate() { 
     return Template.instance().birthDate.get() 
    } 
}); 

Template.patientForm.events({ 
    'click something'(event, instance){ 
    .... 
    instance.birthDate.set(value); 
    .... 
    } 
}); 
2

テンプレートデータを直接変更することはできません(ただし、それは無効ではなく、上書きされます)。どこからテンプレートデータを取得していますか?コレクション?反応変数?もしそうなら、そこにあるデータを変更します - Blazeは変更を認識して再レンダリングします。

たぶんこのような何かが動作します:

Patients.update(templateInstance.data._id, {$set: { 
    birthDate: .., 
    gender: .. 
}}); 
+0

これはaddPatientフォームです。私は、テキストボックスの値に基づいて2つの他のフィールドを自動入力します。 – vijayst

関連する問題