javascript - Meteor.js - 如何在登录时重新呈现模板

Question

我有一个应用程序，在名为“ map ”的模板中的每个页面上都有传单 map 。 在该 map 中，我在“Template.map.rendered”函数中添加了一个上下文菜单。

棘手的是，我想在用户登录时在该上下文菜单中添加一个断开连接链接和一个配置文件链接，但在用户未登录时不添加。 即使您未连接， map 也在那里。

我现在的问题是，当我登录或注销应用程序时，我的 map 没有重新呈现。 我尝试了几个在谷歌上找到的解决方案，但似乎没有任何效果，我在这里有点迷路。

这是我的第一个 meteor 应用。

代码:

Template.map.rendered = function(){
    L.Icon.Default.imagePath = 'packages/leaflet/images';

    var map = L.map('map', {
        doubleClickZoom: false,
        contextmenu: true,
        contextmenuWidth: 160,
        contextmenuItems: [{
            text: 'Show coordinates',
            callback: function(event){
                console.log(event);
            },
            icon: 'images/icons/mini-map-pin.png'
        }]
    }).setView([Session.get('mapLatitude'), Session.get('mapLongitude')], Session.get('mapZoom'));

    map.on('dragend zoomend', function(event){
        //map position and zoom are saved in session on every action so they
        //stay the same when the template is rerendered
        Session.set("mapLatitude", map.getCenter().lat);
        Session.set("mapLongitude", map.getCenter().lng);
        Session.set("mapZoom", map.getZoom());
    });

    if( Meteor.loggingIn() ){
        map.contextmenu.addItem('-');
        map.contextmenu.addItem({
            text: 'My profile',
            callback: function(event){
                console.log(event);
            },
            icon: 'images/icons/profile.png'
        });
        map.contextmenu.addItem({
            text: 'Disconnect',
            callback: function(event){
                console.log(event);
            },
            icon: 'images/icons/logout.png'
        });
    }

    L.tileLayer.provider('OpenStreetMap.BlackAndWhite').addTo(map);
}

map 模板就是这样

template(name="map")
    div#map

并且登录是带有“accounts-ui-bootstrap-3”的标准“account-base”

编辑:啊，我正在使用 Jade 而不是 Blaze，如果这会有所改变的话

Answer 1

您的代码可能存在竞争条件，因为 Meteor.loggingIn() 只会在短时间内为真，并且模板必须仅在该窗口中呈现，以便出现的菜单项。此外，正如您发现的那样，它不会在用户注销后再次运行。

我不知道你的 map 插件有什么功能，但假设它有添加/删除功能，你可以尝试使用 autorun在您呈现的函数内部，而不是上面的 if( Meteor.loggingIn() ) 代码。试试这样的东西:

Template.map.rendered = function() {
  // create the map for all users
  var map = ...;

  // replace the if( Meteor.loggingIn() ) section with this code
  this.autorun(function() {
    if (Meteor.userId()) {
      // add code here to add menu items
      map.contextmenu.addItem(...);
    } else {
      // add code here to remove menu items
      map.contextmenu.removeItem(...);
    }
  });
};

这个想法是，它将创建一个响应式(Reactive)计算，该计算将在用户登录或注销时运行。在每种情况下，您都可以根据需要更新 map 的菜单。