Javascript 淘汰组件-从子ViewModel动态应用绑定

我有一个

淘汰组件

，它呈现员工的姓名。在这个组件中，我可以传递

回调

函数来更改显示的员工姓名的格式

但我遇到了无法更改组件代码的情况。但我必须添加编辑按钮以显示模式弹出窗口，以更新用户信息，如下图所示：

我是如何使用组件提供的

回调

功能来显示这个编辑按钮的。但是我在绑定此按钮的

单击事件

时遇到了一个问题

问题是：尽管我已经定义了回调函数

showmodel

，但它并没有被调用

这是我的密码：

组件注册：

ko.components.register('emp-box', {
      viewModel: function(params) {
      var self = this;
      self.Name = ko.observable();
      self.Callback = params.formatCallback;

      if(self.Callback !== undefined)
      {
        self.Name(self.Callback(params.EmpName));
      }
      else
      {
        self.Name(params.EmpName.firstName + ', ' + params.EmpName.lastName);
      }

    },
    template: '<div class="name-container"><span data-bind="html: Name"></span></div>'
});

ko.components.register（'emp-box'）{
viewModel:函数（参数）{
var self=这个；
self.Name=ko.observable（）；
self.Callback=params.formatCallback；
if（self.Callback！==未定义）
{
self.Name（self.Callback（params.EmpName））；
}
其他的
{
self.Name（params.EmpName.firstName+'，'+params.EmpName.lastName）；
}
},
模板：“”
});

视图模型

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'}}];

    // CALLBACK
    self.changeFormat = function(item)
    {
        return item.firstName + ' - ' + item.lastName + ' <span class="action" data-bind="click: ShowModal">Edit</span>';
    }

    self.ShowModal = function(item)
    {
        alert(1);
    }       
}

ko.applyBindings(new vm());

var vm=function（）{
var self=这个；
self.Emps=[{'Details'：{firstName:'First Name-A'，lastName:'Last Name-A'}，
{'Details'：{firstName:'firstName-B'，lastName:'lastName-B'}}]；
//回拨
self.changeFormat=功能（项目）
{
返回item.firstName+'-'+item.lastName+'Edit'；
}
self.ShowModal=功能（项目）
{
警报（1）；
}       
}
应用绑定（新vm（））；

HTML:

<div data-bind='foreach: Emps'>
  <div data-bind='component: {
       name: "emp-box",
       params: {EmpName: Details, formatCallback: $root.changeFormat}
  }'></div>
</div>

---

工作小提琴：

如注释所示，您正试图通过

html

绑定添加更多的“剔除代码”，使视图动态化。这是行不通的

在

html

绑定可以运行之前，knockout必须已经找到了绑定，否则它怎么知道需要运行

html

绑定呢？一旦绑定阶段完成，它就完成了。因此，您不能以这种方式注入更多的敲除绑定

敲除视图是灵活的，只需添加您希望它们拥有的所有零件并动态显示它们。在这种情况下，您希望有一个按需显示的“编辑”按钮。使用

if

绑定很容易：

编辑

现在，控制此操作的viewmodel分别需要一个

canEdit

值和一个

OneEdit

值、布尔值和函数。在组件绑定期间，可以通过

params

控制这些参数

当您将displayName设置为计算名称并将name formatting函数存储在observable中时，您甚至可以动态切换名称格式。运行下面的代码示例以查看其实际操作

//emp-box.component.js----------------------------------------------------
函数标准名称格式（emp）{
返回ko.unwrap（emp.lastName）+'，'+ko.unwrap（emp.firstName）；
}
ko.组件寄存器（“emp-box”{
viewModel:函数（参数）{
this.emp=params.emp；
this.displayName=ko.computed（函数（）{
var formatter=ko.unwrap（params.formatter）| | standardNameFormat；
返回格式化程序（参数emp）；
});
this.canEdit=params.canEdit；
this.onEdit=params.onEdit；
},
模板：'\
\
编辑\
'
});
// -------------------------------------------------------------------------
函数EmployeeList（参数）{
var self=这个；
self.emps=ko.observearray（参数emps）；
self.canEdit=ko.可观察（假）；
self.firstnameLastname=函数（emp）{
返回ko.unwrap（emp.firstName）+''+ko.unwrap（emp.lastName）；
};
self.nameFormat=ko.observable（self.firstnameLastname）；
self.showmodel=函数（）{
警报（“您单击了”+ko.unwrap（this.displayName））；
};
}
// -------------------------------------------------------------------------
ko.应用绑定（新员工列表）({
环境管理计划：[
{firstName:'First Name-A'，lastName:'Last Name-A'}，
{firstName:'First Name-B'，lastName:'Last Name-B'}
]
}));
.name容器{
填充物：5px；
保证金：2倍；
背景色：#cacaca；
边框：1px实心#888；
边界半径：5px；
}
.name容器跨度{
保证金：5px；
}
身体{
字体系列：arial，无衬线；
字体大小：13px；
}
.行动{
光标：指针；
颜色：蓝色；
文字装饰：下划线；
}

启用编辑
默认格式
替代格式
“我面临一个问题”-您忘记描述您的问题。@Tomalak:更新的问题。问题是没有调用回调函数。正在调用
formatCallback
函数。不会调用
showmodel
函数，因为您无法通过向某些HMTL注入
数据绑定属性来更改视图。击倒束缚你的观点一次。当
html
绑定运行并更改元素的innerHTML时，绑定已经完成。因此，您尝试的方式与您尝试的方式不同。我希望在不修改
组件的情况下实现。但是正如你所说的，在html绑定运行之前，knockout肯定已经找到了绑定，我完全同意你的说法。感谢这就像SQL注入一样：“我希望表名和WHERE条件的数量是用户可配置的”-这绝不是一个好主意，大多数情况下是设计不好的迹象。考虑一种声明性的表达方式，即不依赖于代码注入的方式。例如，创建共享同一视图模型但具有不同视图的单独零部件。在组件绑定中。切换名称以获得差异