Question

我想在流星应用程序中使用模态对话框添加“编辑”功能。在.html我有

<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我有

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
  });

 }

});

在Template.edit_deal.events中，我可以获取当前名称，但无法将其写回表单。如何更改表单值？

Answer 1

您可以使用jQuery's .val()方法设置模态中输入字段的值：

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

但是，我个人更喜欢创建一个帮助函数来设置HTML input value属性：

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>

请注意，自Meteor版本1.0.4起，Template.edit_deal.rendered = function(){};已被弃用，因此您应该使用Template.edit_deal.onRendered(function(){});。

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

1 个答案: