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

Question

我想使用语义 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>

我不明白，因为它甚至没有进入事件函数...（尝试使用 console.log ...

你能帮帮我吗？

Answer 1

不太清楚为什么你的活动没有触发，它应该是。

但是您获取字段值的逻辑：

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

不正确，因为 event.target 将是 #new-rider-submit div，而不是 .ui.large.modal div。您可以通过名称轻松获取字段值：

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

Answer 2

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

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--deny-callbacks

Answer 3

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

这没用

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

same answer...

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

meteor and semantic UI, modal get value

javascript

forms

modal-dialog

meteor

semantic-ui