2

顧客を選択し、その顧客の連絡先をフィルター処理する動的な選択メニューを作成しようとしています。

顧客を選択すると、連絡先が適切にフィルタリングされますが、顧客選択メニューには何も選択されていません。

<template name="newLeadForm">

<form id="lead">
    <fieldset>
        <legend>New Lead</legend>
        <br/>
        <select id="customer_id" class="span12">
            <option id="null" value="null">Select One</option>
            {{#each customers}}<option id="{{id}}" value="{{_id}}">{{name}} - {{city}}, {{state}} {{zip}}</option>{{/each}}
        </select>
        <select id="contact_id" class="span12">
            <option id="null" value="null">Select One</option>
            {{#each contacts}}<option id="{{id}}" value="{{_id}}">{{first_name}} {{last_name}}</option>{{/each}}
        </select>

        <input id="submit" type="submit" class="btn">
    </fieldset>
</form>

</template>

テンプレートに提供されるデータは次のとおりです。

Template.newLeadForm.customers = function () {
return Customers.find();
};

Template.newLeadForm.contacts = function () {
console.log(Session.get("_customer_id"));
return Contacts.find({customer_id: Session.get("_customer_id")});
};

およびイベント ハンドラ

Template.insert.events({
'change form#lead #customer_id' : function (event) {
    customer = $("form#lead #customer_id").val();
    Session.set("_customer_id", $("form#lead #customer_id").val());

},

'submit form#lead' : function (event) {

    if (event.type === 'click' || event.type === 'submit') {

        event.preventDefault();

        var customer_id = $("#customer_id").val();
        var contact_id = $("#contact_id").val();
        var lead_source_id = $("#lead_source_id").val();
        var lead_number = $("#lead_number").val();

        if(Leads.insert({id: Leads.find().count() + 1, customer_id: customer_id, contact_id: contact_id})) {
            $("#customer_id").val(null);
            $("#contact_id").val(null);
            Session.set("_customer_id", null);
        }   
    }
}   
});
4

2 に答える 2

2

Meteorがselect要素のオプション要素を再レンダリングした後、select要素にselectedIndexプロパティを設定して更新するように指示する必要があります。あなたはrenderedイベントでこれを行うことができます：

Template.newLeadForm.rendered = function() {
  $("#customer_id")[0].selectedIndex = 5; // possibly track the index so you know what to set it to
}
于 2013-02-19T18:22:37.487 に答える
0

簡単な回避策:

Template.newLeadForm.rendered = function(){
  $('#customer_id').val(Session.get("_customer_id"))
}

newLeadFormSession["_customer_id"] に依存するため、Session["syntax"] が変更されるたびに再レンダリングされ、Session["syntax"] が変更されるtemplate.hello.renderedたびに呼び出されます。

別のオプションとして、更新したい選択ごとに自動実行を追加できます。

if (Meteor.isClient){
  Meteor.startup(function() {
    Deps.autorun(keep_cust_select_updated)
  })

  function keep_cust_select_updated(){
    $('#customer_id').val(Session.get("_customer_id"))
  }
}

が呼び出されるたびにSession.set("_customer_id", xxxx)、 keep_select_updated が再実行され ( に依存してSession.get("_customer_id")いるため)、正しい値が選択されます (jQuery$('#customer_id').val(...)呼び出しによって)。

"selected"後者の方法の利点は、それぞれの html に正しく追加する必要がないことです。<option>

于 2013-07-20T06:19:48.513 に答える