Question

我有一个流星搭配在我的模板中返回每个项目，我有一个模态设置。模态工作正常，但它始终加载相同的数据。我认为我的方法有点正确。这是设置

我的第一个模板就是这个

{{> blocksList}}

在blocksLists中我有以下

{{#each blocks}}
 {{> blockItem}}
{{/each}}

对于blockItem

<template name="blockItem">
  {{> blockModal}}
    <div class="col-md-6 col-lg-6 col-xl-6">
        <section class="panel panel-featured-left panel-featured-nav-color">
            <a style="cursor: pointer"   id="open-modal">
                <div class="panel-body">
                    <div class="widget-summary">
                        <div class="widget-summary-col widget-summary-col-icon">
                            <div class="summary-icon bg-nav-color">
                                <i class="fa fa-leaf"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </section>
    </div>
</template>

这是模板助手

Template.blockItem.events = {
  "click #open-modal" : function(e) {
    e.preventDefault();
    $("#blockModal").modal("show");
  }
};

最后是模态JS，模板是一个基本的bootstrap模态

Template.blockModal.helpers({
  getOrganicFieldStatusTo:function(){
    console.log(this.organicFieldStatusTo);
    if(this.organicFieldStatusTo != null){
      moment.locale(TAPi18n.getLanguage());
      return moment(this.organicFieldStatusTo).format("MMMM DD, YYYY");
    } else {
     return false
    }
  }
});


Template.blockModal.rendered = function () {

  var longitude =  this.data.longitude;
  var latitude =  this.data.latitude;
  var _id = this.data.productionUnitCode + this.data.subCode;
  Tracker.autorun(function () {
    console.log(this);
    initialize(longitude, latitude, _id);
  });
};

function initialize(longitude, latitude, _id) {
  var myLatlng = new google.maps.LatLng(longitude,latitude);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var contentString = '<div id="content">'+ ' ID: ' + _id + ' longitude: ' + longitude + ' latitude: ' + latitude + '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: ''
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  Tracker.autorun(function () {
    $('#blockModal').on('shown.bs.modal', function() {

      lastCenter=map.getCenter();
      google.maps.event.trigger(map, 'resize');
      map.setCenter(lastCenter);
    });
  });
}

好的更新我发现当我触发点击事件时我没有加载正确的模态我通过执行以下操作来修复

"click #open-modal" : function(e) {
  e.preventDefault();
    var block ='#blockModal' + this.productionUnitCode;
    console.log(this.productionUnitCode);
  $(block).modal("show");
  }

只考虑这种方法我每个项目都会创建模态模板，这似乎是浪费而且对性能不利，特别是如果我有10个或15个项目。我认为需要有一个更好的方法。

当拥有多个模态元素时，Meteor bootstrap模式不能呈现正确的数据？

0 个答案: