javascript - Accessing KO component fields in viewmodel -

i have created first ko component :

components.js

ko.components.register('team-dropdown', {     viewmodel: function (params) {          var self = this;         self.teamnames = ko.observablearray([]);          $.ajax({                 url: 'http://footballcomps.cloudapp.net/teams',                 type: 'get',                 contenttype: 'application/json',                 success: function (data) {                     $.each(data['value'], function (key, value) {                         self.teamnames.push(value.teamname);                     });                     console.dir(self.teamnames);                 },                 error: function (err) {                     console.log(err);                 }             });          self.selectedteam = ko.observable();     },     template: { require: 'text!components/team-dropdown.html' } }); 

team-dropdown.html

<div id="teams" class="inputblock form-group"> <select class="form-control" name="teamname" data-bind="options: teamnames, value:selectedteam"></select> <label id="lblhometeam" data-bind="text: selectedteam"></label> 

and here view want use component :

<div class="row" id="divfixture"> <div class="col-md-4">     <div class="panel panel-info">         <div class="panel-heading">             <h2 class="panel-title">add new fixture</h2>         </div>         <div class="panel-body">              <form data-bind="submit: fixture.addfixture">                 <div class="form-group">                     <team-dropdown />                 </div>....             </form> 

and stripped down view model :

define(['knockout', 'knockout.validation', 'common', 'components'], function (ko) {      return function fixtureviewmodel() {          function fixture(fixtureid, fixturedate, homeid, homename, homebadge, homescore, awayid, awayname, awaybadge, awayscore) {             this.fixtureid = fixtureid;             this.fixturedate = fixturedate;             this.homeid = homeid;             this.homename = homename;             this.homebadge = homebadge;             this.homescore = homescore;             this.awayid = awayid;             this.awayname = awayname;             this.awaybadge = awaybadge;             this.awayscore = awayscore;         }          var self = this;          self.id = ko.observable();         self.fixturedate = ko.observable();         self.homeid = ko.observable();         self.homename = ko.observable();         self.homebadge = ko.observable();         self.homescore = ko.observable();         self.awayid = ko.observable();         self.awayname = ko.observable();         self.awaybadge = ko.observable();         self.awayscore = ko.observable();          self.selectedteam = ko.observable();          self.addfixture = function() {              //how reference selected item component here?      };      }); 

how reference item have selected in component in self.addfixture?

since team-dropdown meant reusable component, should provide way bind it. have it, standalone control, outside world cannot interact except through observables have defined doesn't make flexible.

i add parameters can set observables bind value. fixtures has selectedteam property seems candidate.

ko.components.register('team-dropdown', {     viewmodel: function (params) {         var self = this,             teamnames = ko.observablearray([]),             // default local observable if value not provided             selectedteam = params.value || ko.observable();          // don't want others directly modify teamnames array         self.teamnames = ko.purecomputed(teamnames);         self.selectedteam = selectedteam;          $.ajax({             url: 'http://footballcomps.cloudapp.net/teams',             type: 'get',             contenttype: 'application/json',             success: function (data) {                 $.each(data['value'], function (key, value) {                     // push local `teamnames` array                     teamnames.push(value.teamname);                 });                 console.dir(teamnames);             },             error: function (err) {                 console.log(err);             }         });     },     template: { require: 'text!components/team-dropdown.html' } }); 

then set parameter when use component:

<form data-bind="submit: fixture.addfixture">     <div class="form-group">         <team-dropdown params="value: fixture.selectedteam" />     </div> </form> 

the selected value should set in selectedteam of fixture, can use that.

self.addfixture = function() {     var selectedteam = self.selectedteam(); // should have value };