问为什么在使用“绑定”时无法在输入字段中看到数据？

EN

<!-- the dynamic modal dialog -->
<div id="modal-dialog" class="modal fade" role="dialog" data-backdrop="static" data-bind="css: modalDialog.classes">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-bind="click: modalDialog.close">&times;</button>
        <h4 class="modal-title" data-bind="html: modalDialog.title"></h4>
      </div>

      <div data-bind="with: modalDialog.viewModel">
        <div class="modal-body" data-bind="html: $parent.modalDialog.content"></div>
      </div>
      <div class="modal-footer" data-bind="foreach: modalDialog.buttons">
        <button type="button" class="btn btn-primary" data-bind="click: action, text: label"></button>
      </div>
    </div>

  </div>
</div>

<!-- Test button for open the dialog -->
<button type="button" class="btn btn-info" data-bind="click: testDialog">Open modal</button>

// the main viewmodel
var appVM = {
  modalDialog:
  {
    title: ko.observable(''),
    content: ko.observable(''),
    viewModel: ko.observable(this),
    buttons: ko.observableArray([]),
    classes: ko.observable(''),
    open: function()
    {
      $("#modal-dialog").modal('show');
    },
    close: function()
    {
      $("#modal-dialog").modal('hide');
    }
  },
  openDialog: function(title, content, viewModel, buttons, classes)
  {
    if (!viewModel)
      viewModel = appVM;
    if (!buttons)
      buttons = [{action: appVM.modalDialog.close, label: 'Close'}];
    if (!classes)
      classes = '';

    appVM.modalDialog.title(title);
    appVM.modalDialog.content(content);
    appVM.modalDialog.buttons(buttons);
    appVM.modalDialog.classes(classes);
    appVM.modalDialog.viewModel(viewModel);
    appVM.modalDialog.open();
  },
  testDialog: function()
  {
    var vm = new userViewModel();
    var title = 'Test Title';
    var html = dialogContent;
    var buttons = [
      { action: vm.onSave, label: 'Apply' },
      { action: appVM.modalDialog.close, label: 'Cancel' }
    ];

    appVM.openDialog(title, html, vm, buttons);
  }
};
ko.applyBindings(appVM);

// the user data
function User(data)
{
  var self = this;
  self.first_name = ko.observable(data.first_name).extend({required: true});
  self.last_name = ko.observable(data.last_name).extend({required: true});
}

// the user viewmodel
function userViewModel()
{
  var self = this;
  self.user = ko.observable(new User(
  {
    first_name: 'my first name', 
    last_name: 'my last name'
  }));
  self.onSave = function()
  {
    alert('save data');
  };
}

// The loaded content for the dialog
var dialogContent = ' \
<div class="clearfix"> \
  <div class="col-xs-12"> \
    <div class="row form-group"> \
      <label class="col-xs-12 col-sm-4 col-md-3">Vorname:</label> \
      <input class="col-xs-12 col-sm-8 col-md-9" type="text" data-bind="textInput: user().first_name" title="" value="foo"/> \
    </div> \
    <div class="row form-group"> \
      <label class="col-xs-12 col-sm-4 col-md-3">Nachname:</label> \
      <input class="col-xs-12 col-sm-8 col-md-9" type="text" data-bind="textInput: user().last_name" title=""/> \
    </div> \
  </div> \
</div> \
';

ko.bindingHandlers.boundHtml = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        const contentHtml = ko.unwrap(valueAccessor());

        element.innerHTML = contentHtml;
        ko.applyBindingsToDescendants(bindingContext, element)
    }
};