保留由 Rxjs 生成的复选框的状态 [英] Preserving state of checkboxes generated by Rxjs

问题描述

基于在下拉列表中选择不同的项目，我生成了带有复选框的项目的 html.如何保留复选框的状态，即在下拉列表中的值发生变化时选中/取消选中.在此处查看 plunkr https://plnkr.co/edit/PUG3g7dfTbQjPyIgGLzh?p=preview

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

步骤:

- uncheck 'abc2'
- change dd value to 'international'
- again change the dd value to 'local'
- here 'abc2' must be unchecked...

这是我的代码:

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;
}

推荐答案

这里似乎对我有用:

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

这篇关于保留由 Rxjs 生成的复选框的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！