风格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
知道的任何提示!
答
不能直接样式的输入元素的背景,但是这会给你一个起点:http://jsfiddle.net/7aPwp/2
您应该使用style
的风格和css
上课结合。
例子:
<span class="radioOptions" data-bind="css: { 'radioOptions-checked': $parent.selectedGroupOption() == price() }"> </span>
您是否尝试过'css'结合:http://knockoutjs.com/documentation/css-binding.html – mhu
我已经试过将在绑定的风格,但它不牛逼你有没有做这项工作? – anna
是的,这有效。你应该使用样式''style'和'css'来为类。 – mhu