Question

我是Knockout JS的新手，并了解组件的工作原理。

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

但我面临几个问题：

问题＃1：按钮的点击事件未启动

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

我试过如下面的示例

示例： 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是一个数组，它应该是一个可观察的数组，以便在添加新的Employe时刷新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组件中的点击绑定错误，它有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>更新observable。这里有Value Binding个更多信息。

以下是更新的fiddle。

Knockout组件 - 跨组件传递值

1 个答案: