编辑时模态窗口上的流星变化值

Question

I would like to add 'Edit' function using modal dialog in a meteor app. In .html I have

<template name="edit_deal">
    <button id="edit_btn" class="edit">Edit</button>
    <div id="edit_dialog" title="Edit opportunity">
     {{> Edit }}
    </div>
</template>

<template name="Edit">
 <form class="edit-deal">
    <input type="text" name="cuname" placeholder="Customer Name">
  </form>
</template>

in .js I have

Template.edit_deal.rendered = function() { 
 $( "#edit_dialog" ).dialog({
  height: 240,
  width: 800,
  modal: true,
  resizable: false,
  autoOpen: false,
  dialogClass: 'no-close add-dialog'
 });
}

Template.edit_deal.events({
 'click #edit_btn': function(event, template) {
 $( "#edit_dialog" ).dialog('open');
 }
});

Template.Edit.events({
 "submit .edit-deal": function (event) {
  event.preventDefault();

  var cuname = event.target.cuname.value;

  Deals.insert({
   customerName: cuname
  });

 }

});

In the Template.edit_deal.events I can get the current name, but cannot write it back to the form. How can I change the form value?

Answer 1

You can use jQuery's .val() method to set the value of the input field in your modal:

Template.edit_deal.events({
    'click #edit_btn': function(event, template) {
        $("#edit_dialog").dialog('open');
        $('input[name="cuname"]').val("foo bar");
    }
});

However, I personally prefer to create a helper function which sets the HTML input value attribute:

Template.Edit.helpers({
    cunameValue: function() {
        return "foo bar";
    }
});

---

<template name="Edit">
    <form class="edit-deal">
        <input type="text" name="cuname" placeholder="Customer Name" value="{{cunameValue}}">
    </form>
</template>

Please note that Template.edit_deal.rendered = function(){}; is deprecated since Meteor version 1.0.4, as a consequence you should use Template.edit_deal.onRendered(function(){}); instead.