动态添加纸项到纸菜单

Question

我有一个 paper-menu:

<paper-menu id="city-menu"></paper-menu>

我正在根据 ajax return 的结果使用 jQuery 添加项目到另一个字段中。该字段并不重要，但 ajax 调用的成功函数是

      function (data) {
        if (data.success == 'true') {
          menuItems = '';
          $.each(data.data, function(index, city){
            menuItems += '<paper-item id="'+city.id+'">'+city.name+'</paper-item>';
          });
          $('#city-menu').html(menuItems);
          $('#city-menu').show()
        } else {
          $('#city-menu').hide()
        }
      }

但现在我已经升级了我的 Polymer 组件，这条线不再有效：

$('#city-menu').html(menuItems);

也就是说，我得到的不是一系列 'paper-item' 个城市，而是一个 div:

<div class="selectable-content style-scope paper-menu"></div>

（而且，是的，我已经验证 menuItems 是我认为应该的。）另一方面，如果我做了一些愚蠢的事情，比如

$('#city-menu').html('<h1>Hello World!</h1>');

然后就可以正常工作了。

Answer 1

所以一次插入整个菜单而不是项目是有效的。在这种情况下，ajax 调用的成功函数变为：

      function (data) {
        if (data.success == 'true') {
          $('#city-menu').remove()
          menuItems = '<paper-menu id="city-menu">';
          $.each(data.data, function(index, city){
            menuItems += '<paper-item id="'+city.id+'">'+city.name+'</paper-item>';
          });
          menuItems += '</paper-menu>';
          $(menuItems).insertAfter('#city-id');
          $('#city-menu').show()
        } else {
          $('#city-menu').hide()
        }
      }

令人惊讶的是，它有效。主要是。

动态添加纸项到纸菜单

Adding paper-item to paper-menu dynamically

ajax

jquery

polymer-1.0