風格knockout.js與圖像單選按鈕

我使用knockout.js顯示價格和ID，當用戶在這裏選擇一個單選按鈕是腳本：風格knockout.js與圖像單選按鈕

<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風格？

我previouisly使用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

知道的任何提示！

來源

2013-01-10 anna

您是否嘗試過'css'結合：http://knockoutjs.com/documentation/css-binding.html – mhu

我已經試過將在綁定的風格，但它不牛逼你有沒有做這項工作？ – anna

是的，這有效。你應該使用樣式''style'和'css'來爲類。 – mhu

不能直接樣式的輸入元素的背景，但是這會給你一個起點：http://jsfiddle.net/7aPwp/2

您應該使用style的風格和css上課結合。

例子：

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

來源

2013-01-11 10:19:57 mhu

風格knockout.js與圖像單選按鈕

回答

相關問題