поле компоненты Доступ к КО в ViewModel

Question

я создал свой первый компонент KO:

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' } 
}); 

команды 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> 

И вот мой взгляд, где я хочу использовать компонент:

<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> 

И мой урезанная вид модели:

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 do I reference the selected item from my component here? 

    };  
}); 

Как сослаться на пункт I выбранный в моем компоненте в self.addFixture?

Answer 1

Поскольку team-dropdown предназначен для многоразового использования, вы должны указать способ привязки к нему. Поскольку у вас это есть, это автономный контроль, внешний мир не может взаимодействовать с ним, кроме как через наблюдаемые вами определения, которые не делают его очень гибким.

Я бы добавил к нему параметры, где вы можете установить, какие наблюдаемые привязать к значению. Ваши светильники имеют свойство selectedTeam, так что он кажется вероятным кандидатом.

ko.components.register('team-dropdown', { 
    viewModel: function (params) { 
     var self = this, 
      teamNames = ko.observableArray([]), 
      // default to a local observable if value not provided 
      selectedTeam = params.value || ko.observable(); 

     // you probably don't want others to directly modify the 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 to the local `teamNames` array 
        teamNames.push(value.TeamName); 
       }); 
       console.dir(teamNames); 
      }, 
      error: function (err) { 
       console.log(err); 
      } 
     }); 
    }, 
    template: { require: 'text!components/team-dropdown.html' } 
}); 

Затем установите параметр при использовании компонента:

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

Выбранное значение теперь должно быть установлено в selectedTeam вашего прибора, так что вы можете просто использовать.

self.addFixture = function() { 
    var selectedTeam = self.selectedTeam(); // should have the value 
};