Button class synchronization with parameter control using knockoutjs

Question

Usually I can find a way to make Knockout-js do what I want. In this case, however, I'm struggling a bit, so I open the question to the community here on SO.

Introduction

I am writing an HTML5 web application using typescript, bootstrap, knockoutjs and nodejs node.

In my user interface, which is all controlled via knockoutJS, I have a set of buttons formed as a group of buttons of a 3-button group of selective options.

This reasonable group gives me 4 buttons horizontally, but allows the button selection behavior to remain on par with the group of parameter buttons.

This consistency is important, since only one button at a time can be selected, so when it can be clicked, the rest will be canceled.

This is the default component in BS3, as shown in the following figure:

As you can see in the image, the "Denied" button is selected, to achieve this, the "active" class must be added to the existing list of classes of the label element surrounding the internal radio element that makes up the control. The following HTML code is used to create this image:

<div class="btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1" checked >Rejected
  </label>
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option2">Discarded
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3">Held
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3">Header Added
  </label>
</div>

All this works fine, except for one small flaw, I use JS knockout to control the user interface.

The problem I'm trying to solve

The checked state of each of the parameters is bound to a property inside the view model applied to HTML, therefore the internal option on the rejected button, for example, adds a standard knockout-js binding to it as follows:

<input type="radio" name="options" id="option1" checked data-bind="checked: reject">Rejected

:

reject
discard
hold
addheader

, true/false, , / "active" , , .

, .

,

, , , ,

"btn btn-primary active"

true,

"btn btn-primary"

.

, , , :

SenderDialogViewModel.prototype.isRejectSelected = function () {
        if (this.reject == true) {
            return "btn btn-primary active";
        }
        return "btn btn-primary";
    };

4 , , .

, , :

<label class="btn btn-primary" data-bind="class: isSelected(reject)">

.

:

SenderDialogViewModel.prototype.isSelected = function (selectionVariable) {
        if (selectionVariable == true) {
            return "active";
        }
        return "";
    };

, , .

, , , , .

, , JS- , , 'write', .

, , .

, , , , ( , ), , , .

Answer 1

... , , , , .

, js css .

-js docs:

css CSS DOM. , , , .

, " , , "

, :

<div class="btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-primary" data-bind="css: { active: reject }">
    <input type="radio" name="options" id="option1" checked >Rejected
  </label>
  <label class="btn btn-primary" data-bind="css: { active: discard }">
    <input type="radio" name="options" id="option2">Discarded
  </label>
  <label class="btn btn-primary" data-bind="css: { active: hold }">
    <input type="radio" name="options" id="option3">Held
  </label>
  <label class="btn btn-primary" data-bind="css: { active: addheader }">
    <input type="radio" name="options" id="option3">Header Added
  </label>
</div>

, / , .

, , "" , .

, , , , , , /, , , , , , , , .

30 2014

, , . , CSS . ... Option , .

HTML :

<p><strong>Rule type:</strong></p>
<div class="btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-primary" data-bind="css: { active: reject }, click: function(){ changeType('reject'); }">
    <input type="radio" name="ruletype" value="reject" data-bind="checked: selectedOptionString" >Rejected
  </label>
  <label class="btn btn-primary" data-bind="css: { active: discard }, click: function(){ changeType('discard'); }">
    <input type="radio" name="ruletype" value="discard" value="true" data-bind="checked: selectedOptionString">Discarded
  </label>
  <label class="btn btn-primary" data-bind="css: { active: hold }, click: function(){ changeType('hold'); }">
    <input type="radio" name="ruletype" value="hold" data-bind="checked: selectedOptionString">Held
  </label>
  <label class="btn btn-primary" data-bind="css: { active: addheader }, click: function(){ changeType('addheader'); }">
    <input type="radio" name="ruletype" value="addheader" data-bind="checked: selectedOptionString">Header Added
  </label>
</div>

KEY :

• 1) CSS 'active' , true/false .

• 2) , BS3 ( ) NOT - , HAS - , , , , .

• 3) , , , , , ,

• 4) - , , - , , "true" "false" , , .

, HTML, , , , typescript, JS, , , JS, TS.

, :

this.reject = ko.observable(false);
this.discard = ko.observable(false);
this.hold = ko.observable(false);
this.addheader = ko.observable(false);

( self, this, me... ) , ko

, , :

this.selectedOptionString = ko.computed({
    read: function () {
        if (this.reject())
            return "reject";
        if (this.discard())
            return "discard";
        if (this.hold())
            return "hold";
        if (this.addheader())
            return "addheader";
    },
    write: function (value) {
        console.log("rejectstr:");
        console.log(value);
        if (value == "reject") {
            this.reject(true);
            this.discard(false);
            this.hold(false);
            this.addheader(false);
        }
        if (value == "discard") {
            this.reject(false);
            this.discard(true);
            this.hold(false);
            this.addheader(false);
        }
        if (value == "hold") {
            this.reject(false);
            this.discard(false);
            this.hold(true);
            this.addheader(false);
        }
        if (value == "addheader") {
            this.reject(false);
            this.discard(false);
            this.hold(false);
            this.addheader(true);
        }
    }
}, this);

, , , , "", .

, . , , 4- , , ( , , - )

, - , , CSS , , - true.

, , , .

, , beacuse knockout , , , , , .

, , .

:

SenderDialogViewModel.prototype.changeType = function (newType) {
    this.selectedOptionString(newType);
};

, .

, , git -hub, , .

, , , , , , .

Shawty