How to wrap json object properties as ko.observable ?

~-=Mike=-~

unread,

Jan 6, 2011, 10:55:23 AM1/6/11

to KnockoutJS

This is a real newbie question I would guess. I did find another
thread close to this but didn't hit the nail on the head.

In one of Steve's examples in a blog post, he has the following to
serialize a c# poco to json:

<script type="text/javascript">
var initialData = <%= new JavaScriptSerializer().Serialize(Model)
%>;
</script>

Let's say the result is:

var initialData = {     firstName : "Planet",    lastName : "Earth"};

How do I get it to basic be the same is this?

var initialData = {     firstName :
ko.observable("Planet"),    lastName : ko.observable("Earth")};

I'm guess I'm looking for a util method that wraps each property as an
ko.observable? Maybe this is a simple javascript trick?

CuriousNewbie

unread,

Jan 6, 2011, 12:16:33 PM1/6/11

to KnockoutJS

Take a look at the mapping plugin:

http://knockoutjs.com/documentation/plugins.mapping.html

On Jan 6, 7:55 am, "~-=Mike=-~" <michael.a.johnson...@gmail.com>
wrote:

~-=Mike=-~

unread,

Jan 6, 2011, 1:55:47 PM1/6/11

to KnockoutJS

Thanks for the quick reply!!

OK that's a step in the right direction but there is still something I
am doing wrong!

My postback data is incorrect. I tried unwrapping the object that was
mapped but still get the same result. The follow is the post data
being sent back to the server:

"userLoginViewModel=%7B%22__ko_mapping__%22%3A%7B%7D%7D"

This is what I am actually doing:

<!DOCTYPE html>
<html>
<head>
<title>Logon</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.min.js" type="text/
javascript"></script>
<script src="/Scripts/jquery.tmpl.js" type="text/javascript"></
script>
<script src="/Scripts/knockout-1.1.2.js" type="text/javascript"></
script>
<script src="/Scripts/knockout.mapping.js" type="text/
javascript"></script>
</head>

<body>

<h2>Logon</h2>

<div data-bind="data : viewModel">
<form data-bind="submit: postUserLoginViewModel" action="/User/
Login" >
<ul data-bind="template: { name : 'loginTemplate', data :
userLoginViewModel }"></ul>
<button type="submit">Login</button>
</form>
</div>

<script type="text/html" id="loginTemplate">
<li><label for="UserName"></label><input type="text" id="UserName"
data-bind="value: UserName"/></li>
<li><label for="Password"></label><input type="password"
id="Password" data-bind="value: Password"/></li>
<li><label for="Persist"></label><input type="checkbox"
id="Persist" data-bind="checked: Persist"/></li>
</script>

<div data-bind="template : { name : 'loginTemplate', data :
viewModel } "></div>

<script type="text/javascript">
var userLoginViewModel =
{"UserName":"Mike","Password":"password","Persist":true};

var viewModel = {
userLoginViewModel : ko.mapping.fromJS(userLoginViewModel),
postUserLoginViewModel : function() {
ko.utils.postJson(location.href, { userLoginViewModel:
this.userLoginViewModel });
}
};

ko.applyBindings(viewModel, document.body);
</script>
</body>
</html>

fla...@gmail.com

unread,

Jan 8, 2011, 1:15:14 PM1/8/11

to KnockoutJS

When you want to send data back to the server, convert it back to a
plain JS object using ko.toJS before transmission. This will remove
all the layers of observability, giving you a simple JS object that
will trivially serialize.

ko.utils.postJson(location.href, { userLoginViewModel:
ko.toJS(this.userLoginViewModel) });

In a future version of KO, I guess ko.utils.postJson should do that
automatically.

Steve

On Jan 6, 6:55 pm, "~-=Mike=-~" <michael.a.johnson...@gmail.com>
wrote:

Reply all

Reply to author

Forward