I have a custom binding.
<div data-bind="autocomplete : { inputStyle : { marginRight : marginR }}"></div>
in my init function I do this. I add a inputbox that I need to be styled.
$element.append("<input type='text' data-bind='style='" + value.inputStyle + "' />");
I know this wont work, but please can somebody help me do it right.
Here is the custom binding doing what you requested:
function toStyleStr (obj) {
var result = "";
$.each(obj, function (k,v) {
result += k.toString() + ": " + ko.utils.unwrapObservable(v).toString() + ";";
});
return result;
}
ko.bindingHandlers.autocomplete = {
init: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
$element = $(element);
$element.append("<input type='text' style='" + toStyleStr(value.inputStyle) + "' />");
}
};
var model = {
marginR: ko.observable("10px")
};
ko.applyBindings(model);
Here is a working fiddle: http://jsfiddle.net/RYnbR/2/