从选项中淘汰课程

Question

我试图从一个选项中的选项中获取一个类，然后将该选项类放在选择上这是否有意义？

我的目标是尝试为选择字段着色，以便用户知道他们选择的颜色。

我的JSON看起来像这样

"Object": {
     "inputType": "select",
     "selectOptions": [{
       "value": "alert-success",
       "display": "Green",
       "class": "alert-success"
     }, {
       "value": "alert-info",
       "display": "Blue",
       "class": "alert-sinfo"
     }, {
       "value": "alert-warning",
       "display": "Yellow",
       "class": "alert-warning"
     }, {
       "value": "alert-danger",
       "display": "Red",
       "class": "alert-danger"
     }],
   },

我的html模板如下所示：

<select data-bind="attr: { name : _name, disabled : $data.editable === false, class:$data.class }, options: selectOptions, optionsText: 'display', optionsValue: 'value', value: _value">

我在使用和不使用$ data时尝试了上面的html。我也尝试过使用optionsAfterRender，但所做的就是把所有事情搞砸了。

Answer 1

您可以通过几种方式实现这一目标。如果您的类与值的名称相同，则使用少量代码：

var DemoPage = (function() {
  function DemoPage() {
    var _this = this;
    var data = {
      inputType: "select",
      selectOptions: [{
        value: "alert-success",
        display: "Green"
      }, {
        value: "alert-info",
        display: "Blue"
      }, {
        value: "alert-warning",
        display: "Yellow"
      }, {
        value: "alert-danger",
        display: "Red"
      }]
    };
    _this._value = ko.observable();
    _this.selectOptions = ko.observableArray([]);
    _this.css = ko.computed(function() {
      //the logic for generating this class lies in a simple computed
      // if you want to use the class from the object, you could pass
      // the entire object as the value of select, and using ko.utils.arrayFirst
      // get the class. 

      // .. or if not, since your class and value is always the same:

      // create empty array that can hold many classes
      var classes = [];


      if (_this._value()) {
        // using this method you can add various classes based on multiple logic
        classes.push(_this._value());
      }

      // then just stringify and output directly to css binding
      return classes.join(' ');
    });
    _this.init = function() {
      _this.selectOptions(data.selectOptions)
    };

  }
  return DemoPage;
})();

var demoApp = new DemoPage();
ko.applyBindings(demoApp);
demoApp.init();

.alert-info {
  background-color: blue;
}
.alert-success {
  background-color: green;
}
.alert-danger {
  background-color: red;
}
.alert-warning {
  background-color: yellow;
}
.alert-danger,
.alert-info {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="css: css, options: selectOptions, optionsText: 'display', optionsValue: 'value', value: _value">

或者如果你真的想直接在select binding中读取值：

var DemoPage = (function() {
  function DemoPage() {
    var _this = this;
    var data = {
      inputType: "select",
      selectOptions: [{
        value: "alert-success",
        display: "Green",
        cssClass: "alert-success"
      }, {
        value: "alert-info",
        display: "Blue",
        cssClass: "alert-info"
      }, {
        value: "alert-warning",
        display: "Yellow",
        cssClass: "alert-warning"
      }, {
        value: "alert-danger",
        display: "Red",
        cssClass: "alert-danger"
      }]
    };
    _this._value = ko.observable();
    _this.selectOptions = ko.observableArray([]);
    _this.selectedClass = ko.computed(function() {
      
      var selectedObject = ko.utils.arrayFirst(_this.selectOptions(), function(item) {
        return item.value === _this._value();
      }), classOutput;
      
      
      if (selectedObject) {
        classOutput = selectedObject.cssClass;
      } else {
        classOutput = '';
      }

      return classOutput;
    });
    _this.init = function() {
      _this.selectOptions(data.selectOptions)
    };

  }
  return DemoPage;
})();

var demoApp = new DemoPage();
ko.applyBindings(demoApp);
demoApp.init();

.alert-info {
  background-color: blue;
}
.alert-success {
  background-color: green;
}
.alert-danger {
  background-color: red;
}
.alert-warning {
  background-color: yellow;
}
.alert-danger,
.alert-info {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="attr: { class: selectedClass }, options: selectOptions, optionsText: 'display', optionsValue: 'value', value: _value">