Question

我是Meteorjs的新手，我正在测试FullCalendar和流星的实现，特别是这个模态我遇到了一个奇怪的问题。是一个编辑模式，当你点击我在通行证中成功测试其他应用程序的事件链接列表时，它应该触发，我已经有另一个模式用于在此视图上创建事件并且工作正常。但在这种情况下，它似乎没有正确地附加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 here

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

Answer 1

这已经通过使用peppelg：bootstrap-3-modal解决了，该程序包完成了工作!!!

Meteorjs和bootstrap3模态罕见的行为

1 个答案: