I have a ViewModel and have an observable property that will have a complex object after an edit link is clicked. This is a basic example of managing a set of Groups. User can click on the 'edit' link and I want to capture that Group in SelectedGroup property.
But I'm not sure how should I initialize the SelectedGroup and make every peoperty in this object as observable to begin with.
function ManageGroupsViewModel() {
var self = this;
self.Groups = ko.observableArray();
self.IsLoading = ko.observable(false);
self.SelectedGroup = ko.observable();
}
Typically you'd start out with SelectedGroup being null:
self.SelectedGroup = ko.observable(null);
...and then when you're ready to edit a group, just set it to a new instance; if that instance needs observable properties, you create them just like you did for ManageGroupsViewModel:
function GroupVM() {
this.name = ko.observable("");
this.members = ko.observableArray();
}
and
// Start editing a group
yourGroupsViewModel.SelectedGroup(new GroupVM());
This other answer of mine has a fairly thorough example of doing this.
Related
I can't seem to find the answers I am looking for on stack. Maybe my scenario is just wrong but I'm going to ask the question anyway. I have a form which serves two purposes... Create new user and View User. Both have the same view model User. So let's look at my viewmodel:
var UserModel = function() {
var self = this;
self.UserId = ko.observable();
self.FirstName = ko.observable();
self.LastName = ko.observable();
self.FirstName.extend({required: true});
return self;
}
So my bindings are configured at a higher level, I have a viewmodel with a property called User. this property called User is bound to my form. For the simple scenario of creating a new user I would call:
this.User(new UserModel());
Note: this.User is observable, hence the brackets.
this will successfully create my user model with a blank form and all validation works.
Ok so scenario two! I get an full object from the API, how should I map this. If I use:
this.User(ko.mapping.fromJS(data, {}, UserModel));
the validation doesn't work. I have seen the mapping options which include the create method, but how do I use this without losing the functionality at the top?!
As a side note to make it a little more complicated:
User.ConfirmEmail exists in my viewmodel but not on the server! So that is my next hurdle. If I use the create mapping I know I can easily add it.
My Current Working Example
By using lots of constructor parameters I can accomplish both:
var UserModel = function(id, fname, lname) {
var self = this;
self.UserId = ko.observable(id);
self.FirstName = ko.observable(fname);
self.LastName = ko.observable(lname);
self.FirstName.extend({required: true});
return self;
}
If I now use, new UserModel() it still sets the properties up and I can also pass through the values. It just looks bad :(
Separate the creation of the user from the adding of the validation rule:
function userFactory(user) {
if (typeof user === 'undefined') {
user = new User();
}
user.firstName.extend({required: true});
}
Then you can do this:
var newUser = userFactory(ko.mapping.fromJS(data, {}, new UserModel()));
this.user(newUser);
... and keep the Validation.
I am working with Knockout for the first time and I am struggling with an observable. I have declared it in one view model and I need to gain access to the value in another. Any tips on how to go about that?
What you have to do, it's to inherit the parentViewModel
function parentViewModel() {
// Just a best practice potato here :P
var self = this;
// Initialize the childViewModel change it's 'this'
childViewModel.call(self);
self.observable = ko.observable();
}
function childViewModel() {
var self = this;
console.log(self); // It will output the parentViewModel scope
}
First declare your 1st model in a shared scope, then the 2nd. If you do something like myfirstmodel.myobservable() within your second model, you should see it and interact with it.
var myModel = whatever();
var mySndModel = whateverElse();
ko.applyBindings(myModel, document.getElementById('whatever'))
ko.applyBindings(mySndModel, document.getElementById('whateverElse'))
whateverElse is the constructor of your second model, in which you can call myModel.myObservable()
I am trying to update the array value bound to ObservaleArray. However its not getting updated.
function AppViewModel() {
var self = this;
self.Title=ko.observable('Sample');
self.people = ko.observableArray([
new Person('Ajay'),
new Person('Kumar')
]);
self.updateAns=function(){
self.people()[0].Answered=false;
};
self.updateName=function(){
self.people()[0].Name('John');
};
self.updateTitle=function(){
self.Title('New Title');
};
}
var Person=function(name){
this.Name=name;
this.Answer=[{Id: 1, Answered:true},{Id:2, Answered:true}]
}
ko.applyBindings(new AppViewModel());
Full Demo
How to keep the array value sync?
The observable array will only listen to changes to the array itself, you also need the members onthe Person to be observables if you want them to update
Observable array tracks changes of a collection of things. Meaning it doesn't detect changes of array items, but only changes of the collection, like add/remove/replace elements. In order to keep Person name value in sync it should be observable.
var Person = function(name){
this.Name = ko.observable(name);
...
}
Updated demo
I have nested view models like below. I am trying to access value in container view model from the contained view model (child). I got undefined error when the modelA.prop1 trying to get mainVM.prop1 value. Thanks for your help.
function mainVM() {
var self = this;
//chain associated view models
self.modelA = new modelA();
self.modelB = new modelB();
self.prop1 = ko.observable("some value from mainVM.prop1");
}
function modelA(){
var self = this;
self.prop1 = ko.observable(mainVM.prop1); //I'd like to get value in containing view model above
}
function modelB(){....}
$(function () {
var viewModel = new mainVM();
ko.applyBindings(viewModel);
});
If you want to make sub-ViewModels dependent/aware of their parent you'll have to pass it to them. E.g.:
function mainVM() {
var self = this;
//chain associated view models
self.modelA = new modelA(self);
self.modelB = new modelB(self);
self.prop1 = ko.observable("some value from mainVM.prop1");
}
function modelA(parent){
var self = this;
self.prop1 = ko.observable(parent.prop1); //I'd like to get value in containing view model above
}
function modelB(parent){....}
$(function () {
var viewModel = new mainVM();
ko.applyBindings(viewModel);
});
Think carefully though if this dependency is something you want in your design.
An alternative (though arguably worse from a design standpoint) solution would be to give them access through the scope, e.g.:
$(function () {
function mainVM() {
var self = this;
//chain associated view models
self.modelA = new modelA();
self.modelB = new modelB();
self.prop1 = ko.observable("some value from mainVM.prop1");
}
function modelA(){
var self = this;
self.prop1 = ko.observable(viewModel.prop1); //I'd like to get value in containing view model above
}
function modelB(){....}
var viewModel = new mainVM();
ko.applyBindings(viewModel);
});
Some additional thoughts to #Jeroen answer
Having dependencies to parent from children is not only bad design it can create hard to find memory leaks
If you use the parent from a computed in the child KO will hook up a dependency, if you remove the child it's computed will still fire when the parent change state.
My general way of solving dependencies between models is to use a EventAggregator pattern, I have made one for this library
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy
Its a signalR library, if you do not need singalR you can extract the event aggregation part
Demo
http://jsfiddle.net/jh8JV/
ViewModel = function() {
this.events = ko.observableArray();
this.subModel = new SubViewModel();
signalR.eventAggregator.subscribe(Event, this.onEvent, this);
};
ViewModel.prototype = {
onEvent: function(e) {
this.events.push(e);
}
};
I think you've got an "XY problem" here: you want to accomplish task X (which you haven't named here) and you think that implementation Y (in this case, a child VM having a dependency on its parent) is the way to do it, even though Y might not be the best (or even a good) way to do it.
What's the actual problem you're trying to solve? If you need to access the parent property from within a child binding, Knockout's binding context ($root, $parent, $parents[], etc.) will let you do it, e.g.
<div data-bind="with:modelA">
<p>prop2 is <span data-bind="text:prop2"></span>
and prop1 from the main model is
<span data-bind="text:$root.prop1"></span>
</p>
</div>
In this case you could use $parent in place of $root since there's only one level of nesting.
In knockout js I see View Models declared as either:
var viewModel = {
firstname: ko.observable("Bob")
};
ko.applyBindings(viewModel );
or:
var viewModel = function() {
this.firstname= ko.observable("Bob");
};
ko.applyBindings(new viewModel ());
What's the difference between the two, if any?
I did find this discussion on the knockoutjs google group but it didn't really give me a satisfactory answer.
I can see a reason if I wanted to initialise the model with some data, for example:
var viewModel = function(person) {
this.firstname= ko.observable(person.firstname);
};
var person = ... ;
ko.applyBindings(new viewModel(person));
But if I'm not doing that does it matter which style I choose?
There are a couple of advantages to using a function to define your view model.
The main advantage is that you have immediate access to a value of this that equals the instance being created. This means that you can do:
var ViewModel = function(first, last) {
this.first = ko.observable(first);
this.last = ko.observable(last);
this.full = ko.computed(function() {
return this.first() + " " + this.last();
}, this);
};
So, your computed observable can be bound to the appropriate value of this, even if called from a different scope.
With an object literal, you would have to do:
var viewModel = {
first: ko.observable("Bob"),
last: ko.observable("Smith"),
};
viewModel.full = ko.computed(function() {
return this.first() + " " + this.last();
}, viewModel);
In that case, you could use viewModel directly in the computed observable, but it does get evaluated immediate (by default) so you could not define it within the object literal, as viewModel is not defined until after the object literal closed. Many people don't like that the creation of your view model is not encapsulated into one call.
Another pattern that you can use to ensure that this is always appropriate is to set a variable in the function equal to the appropriate value of this and use it instead. This would be like:
var ViewModel = function() {
var self = this;
this.items = ko.observableArray();
this.removeItem = function(item) {
self.items.remove(item);
}
};
Now, if you are in the scope of an individual item and call $root.removeItem, the value of this will actually be the data being bound at that level (which would be the item). By using self in this case, you can ensure that it is being removed from the overall view model.
Another option is using bind, which is supported by modern browsers and added by KO, if it is not supported. In that case, it would look like:
var ViewModel = function() {
this.items = ko.observableArray();
this.removeItem = function(item) {
this.items.remove(item);
}.bind(this);
};
There is much more that could be said on this topic and many patterns that you could explore (like module pattern and revealing module pattern), but basically using a function gives you more flexibility and control over how the object gets created and the ability to reference variables that are private to the instance.
I use a different method, though similar:
var viewModel = (function () {
var obj = {};
obj.myVariable = ko.observable();
obj.myComputed = ko.computed(function () { return "hello" + obj.myVariable() });
ko.applyBindings(obj);
return obj;
})();
Couple of reasons:
Not using this, which can confusion when used within ko.computeds etc
My viewModel is a singleton, I don't need to create multiple instances (i.e. new viewModel())