Preserving state of checkboxes generated by Rxjs - rxjs5

Question

Based on selecting different items in a dropdown, I am generating html of items with check boxes. How can I preserve the state of checkbox i.e. check/uncheck whenever value in dropdown is changing. See the plunkr here https://plnkr.co/edit/PUG3g7dfTbQjPyIgGLzh?p=preview
Steps:
- uncheck 'abc2'
- change dd value to 'international'
- again change the dd value to 'local'
- here 'abc2' must be unchecked...
here is my code:
var data = [
{type: 'local', name: 'abc1', location: 'xyz1', checked: true},
{type: 'local', name: 'abc2', location: 'xyz2', checked: true},
{type: 'international', name: 'abc3', location: 'xyz3', checked: true},
{type: 'local', name: 'abc4', location: 'xyz4', checked: true},
{type: 'local', name: 'abc5', location: 'xyz5', checked: true},
{type: 'international', name: 'abc6', location: 'xyz6', checked: true},
{type: 'international', name: 'abc7', location: 'xyz7', checked: true}
];
var $container = $('#container');
var $splitDD = $('#testDD');
var splitDD$ = Rx.Observable.fromEvent($splitDD, 'change')
.startWith($splitDD.val())
.map(function(e) { $container.html(''); return e.target ? e.target.value : e;})
.switchMap(function(v) {return data;})
.filter(function(v) {
return v.type == $splitDD.val()
})
.map(getHtml)
.subscribe(function(html) {
$container.append(html);
});
function getHtml(v) {
var checked = v.checked ? 'checked="checked"' : '';
var html = '<label><input class="point" name="' + v.name + '" type="checkbox" ' + checked + '>' +
'<span>' + v.name + ' </span>' +
'</label>';
return html;
}

Answer 1

Here is solved: https://plnkr.co/edit/72ciT20saCpLCLFNBbGv?p=preview
Steps:
added onclick listener to checkbox and while checkbox is changed, array is being updated.
1) in getHTML()
var html = '<label><input onclick="CheckboxPreserve(this);" ......
2) added in bottom of scripts.js :
function CheckboxPreserve(el){
var $this = $(el);
for (var key in data) {
if (data[key]['name']==$this.attr("name")) {
data[key]['checked']=$this.is(':checked');
}
}
}

Answer 2

Here's what seemed to work for me:
var splitDD$ = Rx.Observable.fromEvent($splitDD, 'change')
.startWith($splitDD.val())
.map(function(e) { return e.target ? e.target.value : e;})
// See below what this is about
.switchMap(function(v) { return getData$(data); })
// In functional world, you only cause effects to the world in subscribe
// It's not 100% true because we change data above, but it's close
.subscribe(function(items) {
var html = items.map(getHtml);
$container.html(html);
});
function getData$(itemsArray) {
// We can use Rx.Observable.of() and get the entire array, and do some
// and do some optimxations based on that (for example, toArray won't be needed)
// but I'm avoidng changing the symantics of the question
// just in case if they have a reaosn in the real case
return Rx.Observable.from(itemsArray)
// Update checkboxes before filtering because
// the checkbox you are about to update is one you are about to hide
.map(function(v) {
var existing = $container.find("[name='" + v.name + "']");
if(existing.length) {
v.checked = !!existing.prop("checked");
}
return v;
})
.filter(function(v) {return v.type == $splitDD.val();})
// `toArray` needs an observable that completes
// That's why we separate this from the event, which might emit forever
// as the event might fire any time.
.toArray();
}
function getHtml(v) {
var checked = v.checked ? 'checked="checked"' : '';
var html = '<label><input class="point" name="' + v.name + '" type="checkbox" ' + checked + '>' +
'<span>' + v.name + ' </span>' +
'</label>';
return html;
}
Plunker
Another obvious change, and much easier, is to set another event handler, like:
var containerCHK$ = Rx.Observable.fromEvent($container, 'change')
.subscribe(function(e) {
var input = e.target;
var dataPart = data.filter(function(v) {
return v.name == input.name;
});
if(dataPart.length) {
dataPart[0].checked = !! input.checked;
}
});
Plunker