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'));

codepen バージョン: https://codepen.io/YungJ/pen/VjpEaq?editors=1010

このコードは適切に機能し、結果には非常に満足しています。しかし、適切に書き換えることができると確信しています。2 番目のテンプレートの「vm.query」バインディングに満足できない点。これを取り除き、よりクリーンなquery.bind($data, hint)バインディングを受け取るために、上位のテンプレートからビューモデルを渡したい

4

0 に答える 0