옵션이 동적 일 때 jQueryUI selectmenu를 Meteor 앱에서 작동시키는 데 문제가 있습니다. 내가 사용하고 있습니다 :동적 옵션을 사용하여 jQueryUI selectmenu를 Meteor Blaze 템플릿에 작성하는 방법
- 유성을 1.4.1
- jQuery를 2.2.4
- jQueryUI 1.11.4
- lodash
physiocoder said on a different question 4.15.0 , "유성 반응성 힘 당신에게로를 DOM 업데이트 담당 담당자를 선택하십시오. "
여기가 내 문제의 근본이라는 것을 알고 있습니다. 따라서 페이지/템플릿으로 Meteor가 모든 페이지 컨텐츠/데이터를로드 한 다음 DOM 컨트롤을 jQueryUI의 위젯으로 넘길 수 있다면 아무런 문제가 없습니다. 그러나 나는 케익을 먹고 싶을 때가 있습니다. Meteor가 반응적으로 jQueryUI 위젯 (특히 selectmenu)의 옵션을 피드하고 싶지만 여전히 jQueryUI가 스타일/테마를 처리하도록하고 싶습니다.
템플릿 onRendered 함수에서 jQueryUI 위젯을 초기화하는 것은 잘 작동하며 필요에 따라 템플릿 onDestroyed 함수에서 jQueryUI 위젯을 파괴한다. 옵션 템플릿의 onRendered 함수에서 selectmenu('refresh')을 호출하면 새 옵션을 사용할 수있을 때 선택 메뉴가 새로 고쳐집니다. 그러나 옵션 메뉴를 반응 적으로 제거하여 옵션 메뉴가 새롭고 정확한 UI 상태로 새로 고쳐 지도록 옵션을 반듯이 제거하면 효과적으로 새로 고침을 할 수있는 곳을 찾을 수 없습니다 - 옵션 템플리트가 아닌 Meteor 데이터 컨텍스트를 변경하는 이벤트의 끝이 아닙니다. 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>
자바 스크립트 다음 #entryToInclude의 selectmenu 단지 선택된 항목을 포함하고 있습니다
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');
}
}
});