0

我是淘汰模板引擎的新手，我遇到了一个问题。

我有一个容器，其中包含带有可点击提示的文本输入。我的目标是在用户单击后使用链接标题更改输入文本。

html代码片段：

<script type="text/html" id="query-input-template">
  <input data-bind="value: query" type="search" placeholder="query"></input>
  <span>
    Example: <span data-bind="template: { name: 'hint-template', data: { hint: hints[0] }}"></span> 
          or <span data-bind="template: { name: 'hint-template', data: { hint: hints[1] }}"></span>
  </span>
</script>

<script type="text/html" id="hint-template">
  <a href="#" data-bind="text: hint, click: vm.query.bind($data, hint)"></a>
</script>

<div id="search-container" data-bind="template: { name: 'query-input-template' }"></div>

js代码片段：

viewModel = function() {
  var self = this;

  self.hints = [ "Test query 1", "Test query 2" ];

  self.query = ko.observable();
}

var vm = new viewModel();

ko.applyBindings(vm, document.getElementById('search-container'));

代码笔版本： https ://codepen.io/YungJ/pen/VjpEaq ?editors=1010

这段代码工作正常，我对结果很满意。但我确信它可以被适当地重写。我对第二个模板的“vm.query”绑定不满意。我想从上部模板传递视图模型来摆脱这个并获得更干净的query.bind($data, hint)绑定

4

0 回答 0