knockout.js - Knockout 组件 - 跨组件传递值

Question

我是 Knockout JS 的新手，正在学习组件的工作原理。

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

但是我面临着几个问题:

问题#1:按钮的点击事件没有触发

问题#2:创建员工后，我想在另一个组件中反射(reflect)所有创建的员工。

我已经尝试过，如下例所示

示例: JSFiddle

源代码:

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

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

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

ko.components.register('emp-create', {
		viewModel: function(params) {
    	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]);
        }
      }
			
    },
    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() {
		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是一个数组，它应该是一个可观察的数组，以便在添加新员工时刷新 de 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 的 ViewModel 中, 变化:

self.EmpList = ko.observableArray(),

到

self.EmpList = params.EmpList,

self.AddEmp函数有错别字。它有 self.Emplist.push它应该是self.EmpList.push (EmpList).

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

self.AddEmp函数应该添加一个员工:

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

这是更新的 fiddle

更新:

你的 emp-create模板在 <input type="text"> 中有错误的绑定(bind).你有 data-bind="text: firstName"它应该是data-bind="value: firstName" ，也就是说，你需要改变text至 value为了让 observable 从 <input> 更新.这里Value Binding更多信息。

这是更新的 fiddle .