Question

我正在使用Knockout JS在两个单选按钮之间切换。这有效，现在我想弄清楚当我点击yes/no时我可以切换一个css类，这样我就可以显示/隐藏消息框了。

enter image description here

自从我实施这个以来已经有一段时间了，我是Knockout的新手。所以我有两个问题。

我看到我正在使用data-toggle="buttons-radio"使用Knockout绑定按钮。但我在我的js中找不到任何代码来切换'active / inactive'类。我应该在JS中找到什么吗？
我知道我可以在每个无线电输入上添加data-bind="click: myFunction"。但是因为我正在使用data-toggle，我想知道我是否可以使用它。如果是这样，这是一种更“正确”的方式，我该怎么做？

 <label for="Store_is_web_store">Is this a web store?</label>
 <div class="button-group binary" data-toggle="buttons-radio">
     <span class="radio-wrapper">
         <input type="radio" class="active" name="is_web_store" value="1" />
         <span class="background">Yes</span>
     </span>

     <span class="radio-wrapper">
         <input type="radio" class="inactive" name="is_web_store" value="0" checked="checked" />
         <span class="background">No</span>
     </span>
 </div>

 <div class="slide-in-out-container">
     <div class="message-box">
         <div class="message-text">
             Msg here
         </div>
     </div>
 </div>

这是我用于此页面的唯一JS代码：

function registerStoreModel(){
    var self = this;
    self.brands = ko.observableArray();
    self.brand_name = ko.observable();
    self.brand_id = ko.observable();

    // Add brand
    self.addBrand = function() {

        if (self.brand_name() != "") {
            // Add brand to GUI list
            self.brands.push(new brand(self.brand_id(), self.brand_name()));
            self.brand_name("");
        }
    }.bind(self);

    // Remove brand
    self.removeBrand = function(brand) {
        self.brands.remove(brand);
    }

}

Answer 1

如果没有看到你的JavaScript，很难给你一个确切的答案，但假设你的视图模型中有一个名为isWebstore的observable，我相信以下内容应该会让你顺利进行。

<div class="button-group binary" data-toggle="buttons-radio">
    <span class="radio-wrapper">
        <input type="radio" class="active" name="is_web_store" value="1" data-bind="checked: isWebstore" />
        <span class="background">Yes</span>
    </span>
    <span class="radio-wrapper">
        <input type="radio" class="inactive" name="is_web_store" value="0" data-bind="checked: isWebstore" />
        <span class="background">No</span>
    </span>
</div>

<div data-bind="visible: isWebstore() === '1'" class="slide-in-out-container">
    <div class="message-box">
        <div class="message-text">
            Msg here
        </div>
    </div>
</div>

以下是处理jsfiddle的基本示例。

Answer 2

您可以使用计算的可观察（文档here）

它类似于另一个答案，但有点清洁imo。

<强>的Javascript

this.showMessage = ko.computed(function() {
    return isWebstore() === '1';
}, this);

<强> HTML

<div data-bind="visible: showMessage()" class="slide-in-out-container">
    <div class="message-box">
        <div class="message-text">
            Msg here
        </div>
    </div>
</div>

这里是fiddle

如何检测单击了哪个单选按钮？

2 个答案: