0
275
VistasKnockout JS Agregar o quitar clase
Estoy usando Knockout para generar un formulario dinámico:
function FormField(data) { var self = this; self.Name = ko.observable(data.Name); self.Type = ko.observable(data.Type); self.Options = ko.observableArray(data.Type !== 'text' ? data.Options : []); self.Default = ko.observable(data.Default); if (self.Type() === 'Yes/No') { this.Default.subscribe(function(newValue) { console.log(newValue); }); } } function ViewModel(data) { var self = this; self.Fields = ko.observableArray(ko.utils.arrayMap(data, function(item) { return new FormField(item); })); self.HiddenElements = ko.observableArray([]); self.Default = ko.observable(); } ko.applyBindings(new ViewModel([{ Name: "Test", Type: "Yes/No", Options: [{ name: "Yes" }, {name: "No" }], Default: "" }])); input[type=radio] { display: none; } <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <div data-bind="foreach: Fields"> <!--ko if: $parent.HiddenElements().indexOf(Name()) == -1 --> <div><b type="text" data-bind="text: Name"></b>:</div> <!--ko if: Type() == "Yes/No"--> <div data-bind="foreach: Options"> <label data-bind="css:$data.name == 'Yes' ? 'btn btn-success fa fa-circle-o' : 'btn btn-danger fa fa-circle-o'"> <input type="radio" value="cherry" data-bind="value: $data.name ,checked: $parent.Default" /> <span data-bind="text: $data.name"></span></label> </div> <!--/ko--> <!--/ko--> </div> La salida:
Estoy tratando de eliminar la clase fa-circle-o y agregar la clase fa-check-circle-o cuando cualquiera de los botones está marcado.
Rendimiento esperado:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
El enlace checked en <input> esencialmente dice:
Cuando esta opción está marcada, almacene
$data.nameen el observable$parent.Default
Eso significa que en su etiqueta, puede averiguar si la etiqueta pertenece a una entrada marcada haciendo lo siguiente:
$data.name === $parent.Default()Entonces su enlace será algo como:
<label class="btn fa" data-bind="css: { 'btn-success': $data.name === 'Yes', 'btn-danger': $data.name !== 'Yes', 'fa-check-circle-o': $data.name === $parent.Default(), 'fa-circle-o': $data.name !== $parent.Default() }">...</label>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta