Knockout Component - Passer la valeur à travers les composants

Question

Je suis nouveau à Knockout JS et apprendre comment le composant fonctionne.

J'ai créé deux composants pour créer des employés et afficher la liste des employés créés.

Mais je suis face à deux questions:

Numéro 1: événement Click bouton est mise à feu jusqu'à

Numéro 2: Dès que l'employé est créé, je veux refléter tous les employés créés dans un autre composant.

J'ai essayé, comme indiqué ci-dessous dans l'échantillon

Exemple:JSFiddle

Code Source:

/********************* COMPONENT-1 ************************/ 
 

 
ko.components.register('emp-list', { 
 
\t \t viewModel: function(params) { 
 
    \t var self = this; 
 
     self.Name = ko.observable(); 
 
     self.Name(params.EmpName.firstName + ', ' + params.EmpName.lastName); 
 
\t \t \t 
 
    }, 
 
    template: '<div class="name-container"><span data-bind="html: Name"></span></div>' 
 
}); 
 

 
/********************* COMPONENT-2 ************************/ 
 

 
ko.components.register('emp-create', { 
 
\t \t viewModel: function(params) { 
 
    \t var self = this; 
 
     self.firstName = ko.observable(), 
 
     self.lastName = ko.observable(), 
 
     self.EmpList = ko.observableArray(), 
 
     
 
     self.AddEmp = function() 
 
     { 
 
     alert('1'); 
 
     self.Emplist.push(self.firstName() + ' ' + self.lastName()); 
 

 
     for(i=0; i< self.Emplist(); i++) 
 
     { 
 
      alert(self.Emplist()[i]); 
 
     } 
 
     } 
 
\t \t \t 
 
    }, 
 
    template: '<div class="create"><input type="text" placeholder="First name" data-bind="text: firstName" /><input type="text" data-bind="text:lastName" placeholder="Last name" /><input type="button" value="Add" data-bind="click: $root.AddEmp" /></div>' 
 
}); 
 

 
/******************** VIEW MODEL ************************/ 
 

 
var vm = function() { 
 
\t \t var self = this; 
 
    self.Emps = [{'Details': {firstName: 'First Name-A', lastName: 'Last Name-A'}}, 
 
       {'Details': {firstName: 'First Name-B', lastName: 'Last Name-B'}}]; 
 
       
 
} 
 

 
ko.applyBindings(new vm());

.name-container{ 
 
    padding: 5px; 
 
    margin: 2px; 
 
    background-color: #cacaca; 
 
    border: 1px solid #888; 
 
    border-radius: 5px; 
 
} 
 

 
.name-container span { 
 
    margin: 5px; 
 
} 
 

 
body { 
 
    font-family: arial,sans-serif; 
 
    font-size: 13px; 
 
} 
 

 
.action { 
 
    cursor: pointer; 
 
    color: blue; 
 
    text-decoration: underline; 
 
} 
 

 
.create { 
 
    background-color: #cacaca; 
 
    padding: 5px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div data-bind='component: {name: "emp-create"}'> 
 
</div> 
 

 
<div data-bind='foreach: Emps'> 
 
    <div data-bind='component: { 
 
     name: "emp-list", 
 
     params: {EmpName: Details} 
 
    }'></div> 
 
</div>

Answer 1

Dans votre ViewModel self.Emps est un tableau, il doit être un tableau observable afin de rafraîchir de l'interface utilisateur lorsque de nouveaux employés sont ajoutés (résoud partiellement Numéro 2):

self.Emps = ko.observableArray(
    [{'Details': {firstName: 'First Name-A', 
       lastName: 'Last Name-A'}}, 
    {'Details': {firstName: 'First Name-B', 
       lastName: 'Last Name-B'}}] 
); 

Maintenant, vous devez passer Emps au composant emp-create afin d'ajouter de nouveaux éléments (résoud également numéro 2):

<div data-bind='component: {name: "emp-create", 
     params: {EmpList: Emps}}'> 
</div> 

dans le ViewModel de emp-create, changement:

self.EmpList = ko.observableArray(), 

à

self.EmpList = params.EmpList, 

La fonction self.AddEmp a une faute de frappe. Il a self.Emplist.push et il devrait être self.EmpList.push (EmpList).

Le clic de liaison dans le composant emp-create est faux, il a click: $root.AddEmp et devrait être click: AddEmp (sans $root). Il résout numéro 1

La fonction self.AddEmp devrait ajouter un employé:

self.AddEmp = function() 
    { 
    self.EmpList.push(
     {'Details': {firstName: self.firstName(), 
        lastName: self.lastName()}} 
    ) 
    } 

Voici une mise à jour fiddle

Mise à jour:

Votre modèle emp-create a une mauvaise liaison dans le <input type="text">.Vous avez data-bind="text: firstName" et il devrait être data-bind="value: firstName", c'est-à-dire, vous devez changer text à value afin que l'observable soit mis à jour à partir du <input>. Ici Value Binding plus d'informations.

Voici une mise à jour fiddle.