将参数从 Knockout 模板传递到模态

Question

在这个代码示例中，我正在寻找一种将参数从 Knockout 的 template 中的 data 传递到 Knockout 的 data-bind 的方法，该参数最终应该出现在 modal 窗口中。

结果应该是一个模式窗口，根据要删除的参与者显示参与者的姓名。

现在我必须手动输入名称，应该怎么做才能让它们自动绑定？

var viewModel = function() {
  this.showModal = function() {
    console.log("Showing modal");
    $('#modal').modal('show');
  }
  this.buyer = {
    name: 'Franklin',
    credits: 250
  };
  this.seller = {
    name: 'Mario',
    credits: 5800
  };
};
ko.applyBindings(new viewModel);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
  <h3 data-bind="text: name"></h3>
  <p>Credits: <span data-bind="text: credits"></span>
  </p>
  <button data-bind="click: $root.showModal" class="btn">Delete</button>
</script>

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Delete item</h4>
      </div>
      <div class="modal-body">
        <p>Really delete Franklin?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Delete</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

首先，您需要让名称由 KO 管理：

<p>Really delete <span data-bind="text: deleting"></span>?</p>

在你的视图模型中给自己一个 observable：

this.deleting = ko.observable(null);

然后更新showModal 来更新一个observable：

this.showModal = function(deleting) {
  this.deleting(deleting.name);
  console.log("Showing modal");
  $('#modal').modal('show');
};

那么，由于您使用的是$root.showModal，this 将是不正确的，但我们可以使用bind 来解决这个问题：

<button data-bind="click: $root.showModal.bind($root)" class="btn">Delete</button>

实例：

var viewModel = function() {
  this.showModal = function(deleting) {
    this.deleting(deleting.name);
    console.log("Showing modal");
    $('#modal').modal('show');
  };
  this.deleting = ko.observable(null);
  this.buyer = {
    name: 'Franklin',
    credits: 250
  };
  this.seller = {
    name: 'Mario',
    credits: 5800
  };
};
ko.applyBindings(new viewModel);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
  <h3 data-bind="text: name"></h3>
  <p>Credits: <span data-bind="text: credits"></span>
  </p>
  <button data-bind="click: $root.showModal.bind($root)" class="btn">Delete</button>
</script>

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Delete item</h4>
      </div>
      <div class="modal-body">
        <p>Really delete <span data-bind="text: deleting"></span>?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Delete</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 2

您需要在视图模型中有一个变量来指示选择了哪一个。然后在click 绑定中，根据传递（自动！）到点击绑定的数据来设置它。

var viewModel = function() {
  var self = this;
  this.showModal = function(data) {
    console.log("Showing modal", data);
    self.selected(data.name);
    $('#modal').modal('show');
  }
  this.selected = ko.observable();
  this.buyer = {
    name: 'Franklin',
    credits: 250
  };
  this.seller = {
    name: 'Mario',
    credits: 5800
  };
};
ko.applyBindings(new viewModel);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
  <h3 data-bind="text: name"></h3>
  <p>Credits: <span data-bind="text: credits"></span>
  </p>
  <button data-bind="click: $root.showModal" class="btn">Delete</button>
</script>

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Delete item</h4>
      </div>
      <div class="modal-body">
        <p>Really delete <span data-bind="text:selected"></span>?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Delete</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->