Knockout组件 - 通过组件传递值

Question

我是Knockout JS的新手，学习组件如何工作。

我创建了两个组件来创建员工并显示创建的员工列表。

但我现在面临几个问题：

问题＃1：点击按钮的事件没有启动起来

问题2：一旦被创建的员工，我想反映在另一个组件中创建的所有员工

我试图如下样品示于

实施例：JSFiddle

源码：

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

在你的ViewModel self.Emps是一个数组，它应该是为了刷新德UI当添加新雇员可观察到的阵列（部分地解决问题＃2）：

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

现在，需要传递Emps到emp-create部件为了添加新元素（也解决问题＃2）：

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

在emp-create视图模型，变化：

self.EmpList = ko.observableArray(), 

到

self.EmpList = params.EmpList, 

的self.AddEmp函数具有一个错字。它有self.Emplist.push，它应该是self.EmpList.push（EmpList）。

emp-create组件中的点击绑定错误，它具有click: $root.AddEmp，应该是click: AddEmp（没有$root）。它解决了问题＃1

的self.AddEmp功能应该添加一个Employee：

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

这里是一个更新的fiddle

更新：

你emp-create模板有一个错误的结合在<input type="text">。您有data-bind="text: firstName"，它应该是data-bind="value: firstName"，也就是说，您需要将text更改为value，以便可观察值从<input>更新。这里Value Binding更多信息。

这是更新的fiddle。