javascript - Knockout 组件 - 从子 ViewModel 动态应用绑定(bind)

Question

我有一个 knockout 组件，它呈现员工的姓名。在这个组件中，我可以通过callback函数来改变员工姓名显示的格式。

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

一些我如何使用组件提供的 callback 功能设法显示此编辑按钮。但是我在绑定(bind)此按钮的 click 事件 时遇到了问题。

问题是:即使我定义了回调函数 ShowModal，它也没有被调用。

这是我的代码:

组件注册:

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

View 模型

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());

HTML:

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

工作 fiddle : Fiddle

Answer 1

如评论中所述，您正试图通过 html 绑定(bind)添加更多“knockout 代码”来使 View 动态化。这行不通。

在 html 绑定(bind)甚至可以运行之前，knockout 一定已经弄清楚了绑定(bind)，否则它怎么知道它需要运行 html 绑定(bind)？一旦绑定(bind)阶段完成，它就完成了。因此，您不能以这种方式注入(inject)更多的 knockout 绑定(bind)。

Knockout View 非常灵活，只需添加您希望它们拥有的所有部分并动态显示它们。在这种情况下，您希望有一个按需显示的“编辑”按钮。使用 if 绑定(bind)很容易:

<div class="name-container">
    <span data-bind="text: displayName"></span>
    <span class="action" data-bind="if: canEdit, click: onEdit">Edit</span>
</div>

现在控制它的 View 模型需要一个 canEdit 值和一个 onEdit 值，分别是 bool 值和函数。这些可以在组件绑定(bind)期间通过 params 进行控制。

当您将 displayName 计算为计算值并将名称格式化函数存储在可观察对象中时，您甚至可以动态切换名称格式。运行下面的代码示例以查看它的实际效果。

// emp-box.component.js ----------------------------------------------------
function standardNameFormat(emp) {
    return ko.unwrap(emp.lastName) + ', ' + ko.unwrap(emp.firstName);
}

ko.components.register('emp-box', {
    viewModel: function (params) {
        this.emp = params.emp;
        this.displayName = ko.computed(function () {
            var formatter = ko.unwrap(params.formatter) || standardNameFormat;
            return formatter(params.emp);
        });
        this.canEdit = params.canEdit;
        this.onEdit = params.onEdit;
    },
    template: '<div class="name-container">\
        <span data-bind="text: displayName"></span>\
        <span class="action" data-bind="if: canEdit, click: onEdit">Edit</span>\
    </div>'
});
// -------------------------------------------------------------------------

function EmployeeList(params) {
    var self = this;
    self.emps = ko.observableArray(params.emps);
    self.canEdit = ko.observable(false);

    self.firstnameLastname = function (emp) {
        return ko.unwrap(emp.firstName) + ' ' + ko.unwrap(emp.lastName);
    };
    
    self.nameFormat = ko.observable(self.firstnameLastname);
    self.showModal = function () {
        alert("You clicked on " + ko.unwrap(this.displayName));
    };
}
// -------------------------------------------------------------------------

ko.applyBindings(new EmployeeList({
    emps: [
        {firstName: 'First Name-A', lastName: 'Last Name-A'},
        {firstName: 'First Name-B', lastName: 'Last Name-B'}
    ]
}));

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input type="checkbox" data-bind="checked: canEdit" id="chkEdit">
<label for="chkEdit">Enable editing</label>

<input type="radio" data-bind="value: null, checked: nameFormat" id="chkFmt1">
<label for="chkFmt1">Default format</label>
<input type="radio" data-bind="value: firstnameLastname, checked: nameFormat" id="chkFmt2">
<label for="chkFmt2">Alternative format</label>

<div data-bind='foreach: emps'>
  <div data-bind='component: {
       name: "emp-box",
       params: {emp: $data, formatter: $root.nameFormat, canEdit: $root.canEdit, onEdit: $root.showModal}
  }'></div>
</div>