Meteor + jQuery Selecable: how to save selected objects

help
1

Hello All.
I have a list of selectable objects on the page inside the form:

<ul class="list-unstyled" id="selectable">
{{#each exercises}}
<li id="{{_id}}">
    <div class="row">
        <div class="col-lg-12">
            <div class="hpanel filter-item" name="exercise">
                <div class="panel-body" data-id="{{_id}}">
                    <div class="pull-right text-right" name="options">
                        <small class="label label-success hidden" name="selected">Выбрано</small>
                    </div>
                    <h4 class="m-b-xs" name="exerciseName">{{exerciseName}}</h4>
                    <p class="small" name="exerciseDesc">{{exerciseDesc}}</p>
                </div>
            </div>
        </div>
    </div>
</li>
{{/each}}

I have jQuery code in Template…onRendered:

// Initialize jQuery Selectable to select exercises
    $('#selectable').bind('mousedown', function (event) {
        event.metaKey = true;
    }).selectable({
        selected: function (event, ui) {
            $(ui.selected).find('small[name="selected"]').toggleClass('hidden');
            //            var exerciseId = $(ui.selected, this).attr('id');
            //            console.log(exerciseId);
        },
        unselected: function (event, ui) {
            $(ui.unselected).find('small[name="selected"]').addClass('hidden');
        },
        stop: function (event, ui) {
            var exercisesId = [];
            $('.ui-selected', this).each(function () {
                var exerciseId = $(this).attr('id');
                exercisesId.push(exerciseId);
            });
            //            console.log(exercisesId);
        }
    });

I want to select elements using jQuery selectable, get their IDs to the array and save them by form submit. But form submit triggers in Template…events section. I don’t understand how to transfer IDs of selected objects from …onRendered section to …events. Maybe I use it wrong not Meteor way. Any proposals are welcome.

2

Hi, using ReactiveVar.

3

I was trying to use Session. Reactive-var was new for me. I have read docs about it. You are right, reactive-var will be better.

But again. Question about use case. Is it good way to do it like this or maybe Meteor provide better solution?

5

@nxcong Unfortunatly I can’t use ReactiveVar because it impossible to set value in Template..onRendered section. Only in Template..events section. But my jQuery code in onRendered.

6

Sorry, i don’t know english.
may be try it : http://meteorpad.com/pad/TycetaZSvLPdiuuZa/Leaderboard

7

@nxcong Yes, I decided to use session