Menu
Here's a much simplified example of what I'm trying to do with knockoutjs:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script type="text/javascript">
var derp = { "foo": 1, "bar": 2 };
window.onload = function() { go(); }
function go()
{
var ViewModel = function(foobar)
{
this.foo = ko.observable(foobar.foo);
this.bar = ko.observable(foobar.bar);
}
ko.applyBindings(new ViewModel(derp));
}
</script>
</head>
<body>
<input data-bind="value: foo"/>
<input data-bind="value: bar"/>
<button onclick="go();">Go</button>
</body>
</html>
The objective of this code is to have knockoutjs to update the the values in derp, not the copy inside of the ViewModel.
Is there a way to accomplish this easily with knockout, or am I barking up the wrong tree?
Edit for context:
This is culled from a much larger application. My intent was to use knockout to display and edit the properties of a large, wooly, javascript object. These objects are instantiated dynamically by the user, and can be switched between at-will.
Before I found found knockout, I was manually created DOM elements to do the displaying and editing of each object which was messy and cumbersome. I have some experience with MVVM via WPF in C#, and would have much preferred to use that approach. My initial understanding of knockout was that it'd do just that, not realizing that the ViewModel copies the values captured by ko.observable*. The ViewModel still has a use for me, as it allows me to conditionally expose and simplify access to the members I'd like to edit.
856
I do like @Etch response with Save method. This helps a lot.
But if You want to automate such a things, then I would go with subscribe on observables.
Maybe it's not a cleaner way to do this. Would be more happy if I'm were able to pass variable by reference.
I've prefer to use some wrapper around observables to type less:
var returnFireObservable = function(variable, property) {
var obs = ko.observable(variable[property]);
obs.subscribe(function(newValue) {
variable[property] = newValue;
});
return obs;
};
And use in code this way:
var ViewModel = function(foobar) {
this.foo = returnFireObservable (foobar, "foo");
this.bar = returnFireObservable (foobar, "bar");
};
ko.applyBindings(new ViewModel(derp));
Little demo http://jsfiddle.net/AlfeG/eQ9Zf/2/
Hope this helps.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
