[英]Meteorjs and bootstrap3 modal rare behavior
我是一個關於Meteorjs的新手,我正在測試FullCalendar和meteor的實現,尤其是在使用此模式時遇到了一個奇怪的問題。 是用於編輯的模式,應該在您成功通過測試其他應用程序的事件的鏈接列表時觸發,我已經在該視圖上創建事件的另一個模式可以正常工作。 但是在這種情況下,似乎無法正確附加js行為。 顯示模態 , 但是沒有效果,關閉和提交按鈕都沒有作用 。
我想知道在這種特殊情況下,我是否丟失了某些代碼或某些代碼標簽,或者FullCalendar是否發生沖突? 以及任何幫助,謝謝 。
這是meteor.com上的演示版gbelot.todo3.meteor.com
這是gitHub上的代碼: https : //github.com/gbelot2003/meteor-todo-bt3/blob/todo3-icalendar/client/home
這里是控制器和模板代碼:
Meteor.subscribe("events");
Template.body.rendered = function () {
var fc = this.$('.fc');
this.autorun(function () {
Events.find();
fc.fullCalendar('refetchEvents');
});
};
Template.calendarEdit.helpers({
events: function(){
var fc = $('.fc');
return function (start, end, tz, callback) {
//subscribe only to specified date range
Meteor.subscribe('events', start, end, function () {
//trigger event rendering when collection is downloaded
fc.fullCalendar('refetchEvents');
});
var events = Events.find().map(function (it) {
return {
title: it.date,
start: it.date,
allDay: false
};
});
callback(events);
};
},
options: function() {
return {
id: 'myid2',
class: 'myCalendars',
lang: 'es',
allDaySlot: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
axisFormat: 'h:mm a',
timeFormat: {
agenda: 'h:mm a',
month: 'h:mm a',
agendaWeek: 'h:mm a'
},
firstHour: 7,
editable: true,
eventLimit: false,
events: function (start, end, timezone, callback) {
callback(Events.find({}).fetch());
},
defaultView: 'month'
};
}
});
Template.HomeTemplate.onRendered(function(){
var fc = this.$('.fc');
this.autorun(function () {
Events.find();
fc.fullCalendar('refetchEvents');
});
this.$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD H:mm:ss'
});
});
Template.HomeTemplate.events({
'submit #new-event': function(event){
event.preventDefault();
var title = event.target.title.value;
var start = event.target.start.value;
var end = event.target.end.value;
var description = event.target.description.value;
Meteor.call("addEvent", title, start, end, description);
event.target.title.value = "";
event.target.start.value = "";
event.target.end.value = "";
event.target.description.value = "";
$("#createEvent").modal("hide");
},
/** this modal works well **/
/***************************/
'click .create': function(e){
e.preventDefault();
$("#createEvent").modal("show");
}
});
Template.HomeTemplate.helpers({
event: function(){
return Events.find();
}
});
Template.eventList.events({
'click .delete': function(event){
event.preventDefault();
id = this._id;
Meteor.call('deleteEvent', id);
},
/**** here is the call for the modal *****/
/** with problems. Did I miss something? */
/******************************************/
'click .update': function(e){
e.preventDefault();
$(".updateModal").show();
}
});
這里的homeTemplate
<template name="HomeTemplate" id="home">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Todos & FullCalendar Test</h2>
<hr/>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<h3>Full Calendar</h3>
<!--<button class="refresh">Refresh</button>-->
{{> calendarEdit }}
</div>
<div class="col-md-6 col-sm-12">
<h3>Events todo App <a href="#" id="add-Event" class="create btn btn-Google pull-right"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></a></h3>
<ul class="list-group">
{{#transition in="zoomIn" out="bounceOut"}}
{{#each event}}
{{> eventList}}
{{/each}}
{{/transition}}
</ul>
</div>
</div>
</div>
{{> createEvent}}
{{> updateModal}}
</template>
這是您單擊鏈接的模板
<template name="eventList">
<li class="list-group-item">
<h4 class="list-group-item-heading">
<div class="row">
<div class="col-sm-10">
<a type="button" href="#" class="update">{{title}}</a>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-default delete pull-right"> <span class=" glyphicon glyphicon-trash text-danger" aria-hidden="true"></span></a>
</div>
</div>
</h4>
<p>{{start}} | {{end}}</p>
<p class="list-group-item-text">{{description}}</p>
</li>
</template>
這已經通過使用peppelg:bootstrap-3-modal解決,該程序包完成了工作!!!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.