Question

我有knockout component，它会呈现员工的姓名。在此组件中，我可以传递callback函数来更改显示的员工姓名的格式。

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

我使用组件提供的callback功能设法显示此“编辑”按钮。但是我遇到了绑定此按钮的click event的问题。

问题是：即使我已经定义了回调函数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>'
});

视图模型

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

Answer 1

如评论中所示，您正试图通过html绑定添加更多“淘汰代码”来使视图动态化。这不起作用。

在html绑定甚至可以运行之前，淘汰赛必须已经找到了绑定，因为它还知道它需要运行html绑定吗？一旦完成绑定阶段，就完成了。因此，你无法以这种方式注入更多的敲除绑定。

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

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

现在，控制它的viewmodel分别需要canEdit值和onEdit值，布尔值和函数。这些可以在组件绑定期间通过params进行控制。

当你对displayName进行计算并将名称格式化函数存储在一个observable中时，你甚至可以动态地切换名称格式。运行下面的代码示例以查看它的实际效果。

// 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>

Knockout组件 - 从Child ViewModel动态应用绑定

1 个答案: