Question

当选项是动态的时，我无法在Meteor应用程序中使jQueryUI selectmenu工作。我正在使用：

Meteor 1.4.1
jQuery 2.2.4
jQueryUI 1.11.4
lodash 4.15.0

physiocoder said on a different question，＆＃34;流星反应强迫您选择谁负责DOM更新。＆＃34;。

我意识到这是我问题的根本所在。因此，如果页面/模板可以让Meteor加载所有页面内容/数据，然后将DOM控件移交给jQueryUI的小部件，则没有问题。然而，我有一个案例，我想要我的蛋糕，也吃它 - 我想让Meteor反应性地提供jQueryUI小部件的选项（特别是目前的selectmenu），但仍然让jQueryUI处理样式/主题。 / p>

在模板onRendered函数中初始化jQueryUI小部件工作正常，在模板onDestroyed函数中根据需要销毁jQueryUI小部件也是如此。在新选项可用时，在选项模板的onRendered函数上调用selectmenu('refresh')会刷新选择菜单。但是，我无法找到任何可以有效调用刷新的地方，当选项被反应删除，以便selectmenu刷新到新的，正确的UI状态 - 不是在更改Meteor数据上下文的事件结束时，而不是在选项模板＆＃39; s onDestroyed函数，而不是与相应数据源绑定的Tracker.autorun函数。

HTML：

<head>
  <title>Proof of Concept</title>
</head>

<body>
  <div id="myApp">
    {{> myForm}}
  </div>
</body>

<template name="myForm">
  <div>
    <div id="selectedEntries">
      <h3>Selected Entries</h3>
      <ul class="display-list">
        {{#each entry in selectedEntries}}
          {{> myForm_entry entry}}
        {{/each}}
      </ul>
    </div>

    <br/>

    <form id="includeEntry">
      <select name="entryToInclude" id="entryToInclude">
        {{#each potentialEntry in availableEntries}}
          {{> myForm_option potentialEntry}}
        {{/each}}
      </select>
      <input type="submit" value="Include Entry">
    </form>
  </div>
</template>

<template name="myForm_entry">
  <li>
    <div class="button removeEntry" data-id="{{_id}}">X</div>
    <span>{{name}}</span>
  </li>
</template>

<template name="myForm_option">
  <option value="{{_id}}">{{name}}</option>
</template>

JavaScript的：

Template.myForm.helpers({
  availableEntries: function () {
    return _.filter(Session.get('someEntries'), function(o) {
      return Session.get('selectedEntryIds').indexOf(o._id) == -1;
    });
  },
  selectedEntries: function () {
    return _.filter(Session.get('someEntries'), function(o) {
      return Session.get('selectedEntryIds').indexOf(o._id) != -1;
    });
  }
});

Template.myForm.events({
  'submit #includeEntry': function (event) {
    event.preventDefault();

    if (_.isEmpty(Session.get('selectedEntryIds'))) {
      Session.set('selectedEntryIds', [$('#entryToInclude').val()]);
    } else {
      let selectedEntryIds = Session.get('selectedEntryIds');
      selectedEntryIds.push($('#entryToInclude').val());
      Session.set('selectedEntryIds', selectedEntryIds);
    }
    $('#entryToInclude').selectmenu('refresh')
  },
  'click .removeEntry': function (event) {
    event.preventDefault();

    let selectedEntryIds = Session.get('selectedEntryIds');
    selectedEntryIds = _.pull(selectedEntryIds, $(event.target).parent().attr('data-id'));
    Session.set('selectedEntryIds', selectedEntryIds);
  }
});

Template.myForm.onCreated(function () {
  let someEntries = [{
    _id:'1',
    name:'One'
  },{
    _id:'2',
    name:'Two'
  },{
    _id:'3',
    name:'Three'
  },{
    _id:'4',
    name:'Four'
  },{
    _id:'5',
    name:'Five'
  },{
    _id:'6',
    name:'Six'
  }];
  Session.set('someEntries', someEntries);
  Session.set('selectedEntryIds', []);
});

Template.myForm.onRendered(function () {
  $('#entryToInclude').selectmenu();
  $('input:submit').button();
});
Template.myForm_entry.onRendered(function () {
  $('.button').button();
});
Template.myForm_option.onRendered(function () {
  if ($('#entryToInclude').is(':ui-selectmenu')) {
    $('#entryToInclude').selectmenu('refresh');
  }
});

Template.myForm_option.onDestroyed(function () {
  $('#entryToInclude').selectmenu('refresh');
});

Tracker.autorun(function () {
  if (Session.get('selectedEntryIds')) {
    if ($('#entryToInclude').is(':ui-selectmenu')) {
      $('#entryToInclude').selectmenu('refresh');
    }
  }
});

#entryToInclude selectmenu继续包含刚刚选择的条目;选择编号为高或更高的第二个条目实际上选择后续条目（例如，选择4然后5实际上选择4和6），只是在成功选择之后立即选择最后一个条目除了刷新选择菜单之外什么都不做。

Answer 1

为条目模板的onRendered函数添加刷新功能可以实现这一点。

Template.myForm_entry.onRendered(function () {
  $('.button').button();
  if ($('#entryToInclude').is(':ui-selectmenu')) {
    $('#entryToInclude').selectmenu('refresh');
  }
});

但是，对整个问题采取更好的方法将会受到赞赏。

如何将带有动态选项的jQueryUI selectmenu编写到Meteor Blaze模板中

1 个答案: