javascript - 带有图像的样式 knockout.js 单选按钮

Question

我正在使用 knockout.js 在用户选择单选按钮时显示价格和 ID，这里是脚本:

<div data-bind="with: bin2ViewModel">
    <div class="divRadiobtns" data-bind="foreach: availableGroups">
    <input type="radio" class="radioOptions" name="retailerGroup" data-bind="checked: $parent.selectedGroupOption, value: price" />
    </div>
    <div data-bind="with: selectedRetailerGroup">
    <span class="actualPrice" data-bind="text: price" />
    </div>
    <div data-bind="with: selectedRetailerGroup">
    <input type="hidden"  class="hiddenValue" data-bind="value: retailerproductId" />
    </div>
    </div>

knockout .js:

<script type="text/javascript">
//<![CDATA[
     var Bin2ViewModel = function () {
     var self = this;
     this.selectedRetailerGroup = ko.observable();
     this.selectedGroupOption = ko.observable();
     this.selectedGroupOption.subscribe(function (newVal) {
     var items = $.grep(self.availableGroups(), function (item) { return item.price() == newVal; });
     self.selectedRetailerGroup(items[0]);
     });
     this.selectedGroup = ko.observable();
     this.availableGroups = ko.observableArray(
    [  new RetailerViewModel("302852", "£2.55"),
  new RetailerViewModel("21290", "£1.80")
     ]);
     }
     var RetailerViewModel = function (retailerproductId, price) {
     this.retailerproductId = ko.observable(retailerproductId);
     this.price = ko.observable(price);
     }
     ko.applyBindings({ bin2ViewModel: ko.observable(new Bin2ViewModel()) });
//]]>
 </script>

我想用图像设置单选按钮的样式，所以我尝试过:

CSS:

 .radioOptions
        {
            background: url("http://static.e-talemedia.net/content/images/odditiesyellowselector.png") no-repeat scroll 0 0 transparent;
           margin-bottom: 25px;
    margin-top: 17px;
}

.radioOptions-checked
    {
        background: url("http://static.e-talemedia.net/content/images/odditiesyellowblackselector.png") no-repeat scroll 0 0 transparent;
    }

但我无法正常工作 - 有没有人知道我如何在 knockout.js 中设置样式？

我以前使用 jquery 如下:

<%--<script type="text/javascript">
      //<![CDATA[
        $(function () {
            $('input:radio').hide().each(function () {
                var label = $("label[for=" + '"' + this.id + '"' + "]").text();
                $('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').insertAfter(this);

            });

            $('.radio-fx').click(function () {
                $check = $(this).prev('input:radio');
                var unique = '.' + this.className.split(' ')[1] + ' span';
                $(unique).attr('class', 'radio');
                $(this).find('span').attr('class', 'radio-checked');
                $check.attr('checked', true);
                var rpPrice = $('input[name=selectRetailer]:radio:checked');
                // Here I have an ID
                $(".actualPrice").html(rpPrice.val());

                //                var rpId = $('input[name=selectRetailer]:radio:checked');
                //                $(".actualPrice").html(rpId.val());

            }).on('keydown', function (e) {
                if (e.which == 32) {
                    $(this).trigger('click');
                }

            });


        });      
    //]]>
    </script>--%>

但这抛出了 knockout.js

感谢任何提示!

Answer 1

您不能直接设置输入元素的背景样式，但这将为您提供一个起点:http://jsfiddle.net/7aPwp/2

您应该为样式使用 style 绑定(bind)，为类使用 css。

例子:

<span class="radioOptions" data-bind="css: { 'radioOptions-checked': $parent.selectedGroupOption() == price() }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>