asp.net mvc - How can I convert this knockout view model to be Durandal compliant? -

i have system built on knockoutjs , trying take advantage of durandal. have figured out how make mvc routes play nicely , quite comfortable in respect. however, little bit confused view models. suppose confusion lies ignorance of requirejs. looking simple example following sample view model:

the following skeleton/example of common in system , need know how make play nicely durandal:

var somemodela = function () {     var self = this;      self.id = ko.observable(0);     self.name = ko.observable(null);     //etc      self.create = function () {         //etc     };      self.edit = function (id) {         //etc     };      self.delete = function (id) {         //etc     };      self.save = function () {         //etc     };      self.cancel = function () {         //etc     }; };  var somemodelb = function () {     var self = this;      self.id = ko.observable(0);     self.name = ko.observable(null);     //etc      self.create = function () {         //etc     };      self.edit = function (id) {         //etc     };      self.delete = function (id) {         //etc     };      self.save = function () {         //etc     };      self.cancel = function () {         //etc     }; };  var viewmodel = function () {     var self = this;      self.somemodela = new somemodela();     self.somemodelb = new somemodelb(); };  var viewmodel; $(document).ready(function () {     viewmodel = new viewmodel();     ko.applybindings(viewmodel);      $("#grida").kendogrid({         //etc     });     $("#gridb").kendogrid({         //etc     }); }); 

all need basic example based on above.

and before mentions it; yes aware of aurelia - it's awesome , using in new projects... current system making heavy use of knockout , therefore makes sense go durandal now... may turn out stepping stone towards aurelia later anyway.

edit

please note have tried following no success:

js:

var somemodela = function () {     var self = this;     self.name = ko.observable(null); }; var somemodelb = function () {     var self = this;     self.name = ko.observable(null); };  define(['knockout'], function (ko) {     return function () {         var self = this;         self.modela = new somemodela(),         self.modelb = new somemodelb(),          self.showa = function () {             alert(this.modela.name());         },         self.showb = function () {             alert(this.modelb.name());         }     }; }); 

markup:

<section>     @html.textbox("namea", null, new { @class = "form-control", data_bind = "modela.name" })     @html.textbox("nameb", null, new { @class = "form-control", data_bind = "modelb.name" })      <button type="button" data-bind="click: showa" class="btn btn-default">show a</button>     <button type="button" data-bind="click: showb" class="btn btn-default">show b</button> </section> 

the above not seem bind data correctly. when change in textbox, click button, can see values still showing "null". missing here?

i being pretty stupid here; forgetting tell knockout bind to.. in case, "value". so, working example follows:

js:

define(['knockout'], function (ko) {     var somemodela = function () {         var self = this;         self.name = ko.observable('testa');     };     var somemodelb = function () {         var self = this;         self.name = ko.observable('testb');     };      var vm = {         modela: new somemodela(),         modelb: new somemodelb(),          showa: function () {             alert(this.modela.name());         },         showb: function () {             alert(this.modelb.name());         }     };     return vm; }); 

markup:

<section>     @html.textbox("namea", null, new { @class = "form-control", data_bind = "value: modela.name" })     @html.textbox("nameb", null, new { @class = "form-control", data_bind = "value: modelb.name" })      <button type="button" data-bind="click: showa" class="btn btn-default">show a</button>     <button type="button" data-bind="click: showb" class="btn btn-default">show b</button> </section>