knockout.viewmodel
knockout.viewmodel copied to clipboard
coderenaissance
AMD Compatibility
In my project, i made changes to knockout.viewmodel to make it compatible with AMD (i am using durandal.js) based on template in UMD.js. The changes is also compatible when used without AMD.
If desired, i can commit back the changes. But i am not sure about the policy and requirement of pull-request, if any.
The changes are in my fork of knockout.viewmodel. Note i only change the knockout.viewmodel.js and the minified version knockout.viewmodel.min.js
It is actually easy edit, i believe anyone can do it. Nothing big, really
I've run into a small problem I hope someone can help me with. I have written a small sample app for learning the use of the Knockout Viewmodel plugin. I have now ported it over to and AMD module with the use of this fork of the plugin. Everything works great except one little thing. I define a struct to map, define some extend options before defining the viewmodel - where I also do the mapping.
In the extend options I want to push some data over to the viewmodel, but I can't get it to work.
The problem is on line 56 in the js file in this gist: https://gist.github.com/trondulseth/a938aae15fb8eca11cbc
Any help in solving this is highly appreciated!
@trondulseth i'm not sure how ur code works, apparently it's incomplete. would be easier if u can set up a jsfiddle that we can inspect on
@meongx Thank you for your swift reply!
I have no idea how to setup a jsfiddle for a knockout component setup - but the code in the gist is the two complete files I have in my component - and they are working apart from that one function.
But I've done some changes that I think has brought me one step further.
In the html file I am now doing this (line 30):
<input data-bind="click: $component.EditContinent" class="btn btn-primary" type="button" value="Edit">
And calling a function on the view model works. In the js file I have this:
function KoViewmodel(params) {
this.places = ko.viewmodel.fromModel(placesModel,options);
this.selectedContinent = ko.observable(new continent({}));
}
KoViewmodel.prototype.EditContinent = function(continent) {
console.log(this);
this.selectedContinent(continent);
};
The function is triggered, but the 'this scope' in the console log shows the continent object that is being passed into it, and not the 'this scope' of the KoViewmodel. So the this.selectedContinent() function fails.
@trondulseth by "incomplete", i meant we cannot see how your "component"s are glued together (i.e we don't know how your component's return value are processed by your framework)
as for the scope, you need to "remember" it by storing it in a var
var scope;
function KoViewmodel(params) {
// remember the scope
scope = this;
this.places = ko.viewmodel.fromModel(placesModel,options);
this.selectedContinent = ko.observable(new continent({}));
}
KoViewmodel.prototype.EditContinent = function(continent) {
console.log(this);
// instead of 'this'
// this.selectedContinent(continent);
// use 'scope'
scope.selectedContinent(continent);
};
Note that it only works if your component is singleton. If it isn't, you need to write your constructor differently
IMHO, returning the constructor (KoViewmodel) directly is less flexible than returning an instance. But if that's how your framework do things, i guess there's no way around it
@meongx The framework I'm using is based of Steve Sandersons Yeoman Generator app - described here: http://www.rahulpnath.com/blog/yo-ko-a-yeoman-generator-for-knockoutjs/
I'm just learning the technologies involved in this app for creating a SPA, so there is some require.js - with crossroads.js and hasher.js handling the routing.
That being said - the example code you provided worked perfectly!!! Thanks a lot - and thanks a lot for forking out and making the viewmodel plugin AMD friendly!!!