ViewData and javascript - class name not being read

Question

For some reason I'm having trouble assigning viewdata to some javascript.

I have the following code:

@{ 
string item = ".playerItem_" + ViewData["itemType"];
}

<script type="text/javascript">
 $(function () {

console.log(item);
$(".items.droppable").droppable({
                    accept: '@item',
                    drop: function (event, ui) {
                    //...
                    }
 });

});

</script>

If I look at the console I can see '.playerItem_hat' being printed. If I type '.playerItem_hat' into the 'accept' attribute it works fine. But as soon as I use @item inside the accept attribute it doesn't seem to be picking up the class name. I can see the text being printed in the source so its definitely there. Even stranger is that if I hardcode 'item' to '.playerItem_hat', the droppable works. I've narrowed it down to whenever I use ViewData["itemType"]. I've looked at some other threads that suggest javascript.serialize, but that seems to be a seperate issue.

Is there something about the page lifecycle I'm missing? Is there anything that might be causing an issue by using ViewData inside a jquery call? If the text wasn't printing at all I could understand but I can see it in there. Very odd.

Anyone else ever run into this issue?

*Update *

Ok so I think I've figured out the problem. If anyone else runs into this it seems like it's a fairly easy trap.

The code above is inside a page that is being called through a Html.Partial. The ViewData above is a string I'm passing through to the page and there are 5 different calls.

 Html.Partial("PageModules/Shared/ItemModule", Model, new ViewDataDictionary() {{"moduleType", "head"}})}

 Html.Partial("PageModules/Shared/ItemModule", Model, new ViewDataDictionary() {{"moduleType", "feet"}})}

 Html.Partial("PageModules/Shared/ItemModule", Model, new ViewDataDictionary() {{"moduleType", "hands"}})

and so on. What the issue appears to be is that the code above is generated, but not actually output to the, what's is called, output stream? In other words, The first call generates the html, then the second generates its html and changes the value of moduleType. At this point the html has not been actually inserted into the page that holds these Partial calls. At least, as far as I can tell it's something along those lines.

The trick is to force it to output the html, THEN move onto the next partial call and modify the value of the ViewData as it sees fit. My solution is to add:

    @{ string itemBarHtml = Html.Partial("PageModules/Shared/GraphicalModuleBar", Model, new ViewDataDictionary() {{"moduleType", "head"}}).ToString();
     }

    @Html.Raw(itemBarHtml)

Does this sound plausible?