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。