流星和语义UI，模态获取价值

meteor and semantic UI, modal get value

本文关键字：获取 模态 语义 UI 流星      更新时间：2023-09-26

我想使用语义UI将表单放入模态中。我找不到在模板事件中获取表单值的方法。。。你能帮我吗？

这是JS:

Template.riderForm.events({
'click .newRiderButton': function(event) {
    event.preventDefault();
    $('.ui.modal').modal('show');
},
'click #new-rider-submit': function(event) {
    event.preventDefault();
    var firstname   = event.target.firstname.value;
    var lastname    = event.target.lastname.value;
    Riders.insert({
        firstname: firstname,
        lastname: lastname,
        createdAt: new Date()
    });
    event.target.firstname.value    = "";
    event.target.lastname.value     = "";
    $('.ui.modal').modal('hide');
}
});

Html:

<template name="riderForm">
<button 
    class="ui button icon right labeled teal newRiderButton" 
    type="newRiderButton" 
    name="newRiderButton">
    <i class="right checkmark icon"></i>New rider
</button>

<div class="ui large modal">
<i class="close icon"></i>
<div class="header">Add someone</div>
<form class="ui form new-rider content">
        <div class="field">
            <div class="two fields">
                <div class="four wide field">
                    <label>First name</label>
                    <input type="text" name="firstname" placeholder="First name">
                </div>
                <div class="four wide field">
                    <label>last name</label>
                    <input type="text" name="lastname" placeholder="Last name">
                </div>
            </div>
        </div>
    <div class="actions">
<div id="new-rider-submit"  class="ui positive right labeled icon button">
    <i class="right checkmark icon"></i>Send
</div>
 </div>
</form>
</div>
</template>

我不明白，因为它甚至没有进入事件功能。。。（尝试使用控制台.log…

你能帮我吗？

idk为什么事件没有触发，但您可以使用批准/拒绝回调

Template.riderForm.events({
'click .newRiderButton': function(event) {
    event.preventDefault();
    $('.ui.modal')
    .modal({
      onApprove : function() {
        console.log('click #new-rider-submit');
        var firstname   = $('input[name="firstname"]').val();
        var lastname    = $('input[name="lastname"]').val();
        Riders.insert({
          firstname: firstname,
          lastname: lastname,
          createdAt: new Date()
        });
        $('input[name="firstname"]').val("");
        $('input[name="firstname"]').val("");
        $('.ui.modal').modal('hide');
      }
    })
    .modal('show');
}
});

http://semantic-ui.com/modules/modal.html#approve--拒绝回调

不能很清楚地说明为什么你的事件没有启动，它应该是。

然而，您获取字段值的逻辑：

var firstname   = event.target.firstname.value;
var lastname    = event.target.lastname.value;

是不正确的，因为event.target将是#new-rider-submitdiv，而不是.ui.large.modaldiv。您可以很容易地通过名称获取字段值：

var firstname   = $('input[name="firstname"]').val();
var lastname    = $('input[name="lastname"]').val();

我没有找到原因，但在模态中定义的模板元素的事件没有在流星中触发。但是如果您将模态内容分离到另一个模板并将事件附加到它们。并且只在模态中渲染它们，它们是完美的！！！！

这不起作用

HTML

<template name="firstModal">
    <div id="firstModal" class="ui wide modal">
        <i class="close icon"></i>
        <input type="button" class="ui button" value="click me">
    </div>
</template>

JS

Template.firstModal.events({
    'click .button': function(event, template){
        alert('click !!!!!!!')
    }
});

但这太完美了

HTML

<template name="firstModal">
    <div id="firstModal" class="ui wide modal">
        <i class="close icon"></i>
        {{>firstModalContent}}
    </div>
</template>
<template name="firstModalContent">
    <input type="button" class="ui button" value="click me">
</template>

JS

Template.firstModalContent.events({
    'click .button': function(event, template){
        alert('click !!!!!!!')
    }
});

同样的答案。。。

相关文章：