javascript - 查询 View 模型的模板

Question

我有一个用于查询产品的 View 模型，与此类似。

function ProductQueryModel() {
  this.publishedSince = ko.observable();
  this.nameContains = ko.observable();
  ...
  this.SubmitQuery = function() { 
    // what shall I do? ...
  }
}

现在我为此 View 模型创建一个模板，以便我可以在应用程序中重用它。

<template id="productquerymodel-template">
  <form>
    ...
    <input type="text" data-bind="textInput: nameContains"/>
    ...
    <button type="submit" data-bind="click: SubmitQuery">Submit</button>
  </form>
</template>

我故意不使用 submit 绑定(bind)，因为在大多数情况下，我希望仅在单击按钮时进行 frm 提交，以防止意外提交。

我在提交表单时遇到问题。绑定(bind)到提交按钮的 click 事件的方法在查询模型中没有意义，因为查询模型本身不知道当 时要做什么查询。它应该位于查询 View 模型的外部，因为方法实现取决于具体使用查询模型的内容。

但另一方面，在模板中包含提交按钮是有意义的，因为它是表单的一部分。

一种方法是在 template 中定义 click 绑定(bind)，如 $parent.SubmitQuery.bind($parent)，但随后我会限制模板的使用者始终在查询模型的父级上定义 SubmitQuery 函数，我认为这不是一个很好的解决方案。

有人知道此类场景的现有实践，或者任何其他可能在这些情况下有所帮助的想法吗？

Answer 1

这是我实现这一目标的方法。

模板文件:

<script type="text/html" id="productquerymodel-template">
  <form>
    <input type="text" data-bind="textInput: nameContains"/>
    <button type="submit" data-bind="click: SubmitQuery">Submit</button>
  </form>
</script>

<script>
  function ProductQueryModel() {
    var self = this;
    self.publishedSince = ko.observable();
    self.nameContains = ko.observable();
    self.SubmitQuery = function () {
      // Do nothing by default
    };
  }
</script>

HTML 页面:

<div data-bind="template: { 
  name: 'productquerymodel-template',
  data: ProductQuery 
}"></div>

<script>
  // This would be your main view model for the page
  function MainViewModel() {
    var self = this;
    self.ProductQuery = new ProductQueryModel()
  }

  // Initialize an instance of the view model
  var vm = new MainViewModel();

  // Insert your page specific SubmitQuery function here
  vm.ProductQuery.SubmitQuery = function () {
    alert('Page specific stuff');
  };

  ko.applyBindings(vm);
</script>

fiddle 链接:https://jsfiddle.net/dw1284/fopwgf4a/