我是 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>
最佳答案
在您的 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 .
关于knockout.js - Knockout 组件 - 跨组件传递值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45977932/