从 Knockout 组件中引用 DOM 个元素

Question

我正在编写一个淘汰组件，我需要通过 jquery.

对组件内的 DOM 对象进行一些操作

如何获取对元素的引用？我无法在其上放置 id 属性，因为它会针对页面上组件的每个实例重复。

考虑这个例子：

<!-- component template -->
<div>
    <p data-bind="text: name">
    <audio></audio>
</div>


// View model
define(["jquery", "knockout"], function ($, ko) {

    var audioElement = $("????");

    function vm(params) {        
        var self = this;
        self.name = params.name;    
    };

    return vm;
});

当页面上有多个组件实例时，如何获取对音频标签的 jquery 引用？

Answer 1

如果您使用 createViewModel 工厂函数注册您的组件，您可以在实例化组件时访问相关的 DOM 部分。

来自the docs，查看关于componentInfo的评论：

ko.components.register('my-component', {
  viewModel: {
    createViewModel: function(params, componentInfo) {
      // - 'params' is an object whose key/value pairs are the parameters
      //   passed from the component binding or custom element
      // - 'componentInfo.element' is the element the component is being
      //   injected into. When createViewModel is called, the template has
      //   already been injected into this element, but isn't yet bound.
      // - 'componentInfo.templateNodes' is an array containing any DOM
      //   nodes that have been supplied to the component. See below.

      // Return the desired view model instance, e.g.:
      return new MyViewModel(params);
    }
  },
  template: ...
});

我强烈建议通过敲除及其数据绑定进行 DOM 操作。

从 Knockout 组件中引用 DOM 个元素

Referencing DOM elements from within a Knockout Component

javascript

jquery

reference

custom-component

knockout.js