Data Bind style with background don't work

[Gordan Jandreoski]

Hi,

I have just start using the KnockoutJS and I think it is great!!! :)

I was experimenting with it and I come up to a problem. I have MVC
controller from where I get my data as JSON and using the ko.mapping
for the view. I can see that the JSON data is ok and all properties
are returned. When I try to data-bind to the style background in my
template the style is not applied. I was trying different options but
with out success.

Here is my sample code:

<div class="mainActionContainer" data-bind='template: { name:
"wftemplate",

foreach: trans}'>
</div>

<script id="wftemplate" type="text/html">
<div class="actionLink topMenuItem" data-
bind="attr: { actionid: Id,

itm: 0}">
<div class="actionImage" data-bind="style:
{ background: ImageUrl() + ' no-repeat center' }" >
</div>
<div class="actionTitleText" data-bind="text:
Title">
</div>
</div>
</script>

<script type="text/javascript">

$(document).ready(function () {

$.ajax({
async: true,
type: "POST",
contentType: "application/json;
charset=utf-8",
url: 'Actions/GetAll',
data: null,
dataType: "json",
success: function (data) {

var viewModel =
ko.mapping.fromJS(data);

var vm =
{
trans: viewModel
}

ko.applyBindings(vm);
},
error: function (a1, a2, a3) {
alert(a1.responseText);
//location.reload(true);
}
});
});

</script>

What I'm missing here? I know I can use a css for this issue but the
problem is that the data that comes from the server has property image
path.

Thanks.

[Andrew Booth]

One quick thing to try. Are you missing the url('imageUrl') wrapper in the background style declaration?

<div class="actionImage" data-bind="style: { background: 'url(' + ImageUrl + ') no-repeat center' }" ></div> 

[Gordan Jandreoski]

Oh god!! How could I forget this :).

Thanks that solved the problem.

The correct is : <div class="actionImage" data-bind="style:
{ background: 'url(' + ImageUrl() + ') no-repeat center' }" > just in
case if some one forget it like me ;)