Knockout.js获取与数据关联的dom对象

Question

我正在使用knockout.js来构建动态列表,我正在试图弄清楚如何在可观察数组中获取与对象关联的DOM对象.具体来说,我想连续获取jQuery.

例:

<ul data-bind="foreach: Item">
    <li data-bind="events: {click: getDomObject}, text: 'text: ' + text">
    </li>
</ul>

在getDomObject函数中,我希望能够获取特定的<li></li>DOM对象,以便我可以使用它进行一些jQuery操作.

我已经考虑过将一个id成员添加到Item ViewModel然后将id添加为行项目的html id然后根据它进行选择,但我觉得应该有一个更简单的方法.

引用knockout.js生成的动态HTML的正确方法是什么？

Answer 1

像click这样的事件处理程序传递了两个参数.那是

1. 此事件所属的项 - 就像您使用foreach绑定(在您的情况下为"Item")呈现的可观察数组的条目.

2. 并且,一个事件对象,为您提供有关实际事件的更多信息.此对象包含单击的DOM元素(键"target"):

   getDomObject = function(item, event) {
       var $this = $(event.target);
       // ...
   }
   

只是注意:不要混合淘汰和原生jQuery DOM操作 - 如果你可以通过巧妙的敲除绑定获得相同的结果,我建议你去做.

这是一个简单的演示:http://jsfiddle.net/KLK9Z/213/

var Item = function(color) {
  this.color = String(color);
  this.setTextColor = function(item, event) {
    $(event.target).css('background', color);
  };
};

ko.applyBindings(new function() {
  this.Items = ko.observableArray([
    new Item('red'),
    new Item('blue'),
    new Item('green')
  ]);
}());

li {
  padding: 2px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul data-bind="foreach: Items">
  <li>
    <button data-bind="click: setTextColor, text: 'Color: ' + color"></button>
  </li>
</ul>

Answer 2

如果$(event.target)解决方案与项目的DOM元素所在的已经发生的事件相关,则该解决方案很好.但有时你没有目标项目,因为没有事件(例如 - 你想将列表滚动到一个没有被用户手势的项目).

在这种情况下,您可以为项目的DOM元素id属性提供包含项ID的唯一值:

<li data-bind="attr: {id: 'item_' + id}">

然后getDomObject()看起来像:

getDomObject = function(item) { return $("#item_" + item.id); }

Answer 3

要添加第三个选项,也适用于没有事件要处理的情况(如果您有事件,则接受的答案是最佳/优化的).

创建自定义绑定,例如:

ko.bindingHandlers.scrollTo = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            var scrollParent = $(element).closest("div");
            var newTop = $(element).position().top + scrollParent.scrollTop();
            scrollParent.scrollTop(newTop);
        }
    }
};

用法如下:

<li data-bind="scrollTo: $parent.scrollTo() && $parent.scrollTo().id == id">

在上面的例子中,$ parent是我的View Model.我有一个包含唯一ID的可观察对象.无论何时我设置了scrollTo()对象,列表都会滚动到该项目.

请注意,我的代码假定LI的父DIV具有滚动条(溢出:自动/滚动).您可以根据自己的需要进行调整,可能在父级上使用一个类并将其用于jQuery选择器,或者使您可以通过数据绑定选项传递选择器非常灵活...对我来说,这就足够了,因为我总是使用div作为我的可滚动部分.

Answer 4

我有一个类似的问题。我想出一个类似于Backbone.js使用el和$ el引用的解决方案。

在您的ViewModel中：

var myViewModel = function(){
  var self = this;

  //html element
  self.el = ko.observable();

  //jquery wrapped version
  self.$el = ko.observable();
}

在html中（例如list元素）：

<!-- left side is the name of the handler, right side is name of the observable -->
<li class="myclass" data-bind="el: el, $el: $el"></li>

在bindingHandlers中（显示init的所有可能参数）：

ko.bindingHandlers.el = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
    //assign value to observable (we specified in html)
    value(element);
  }
};

ko.bindingHandlers.$el = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var value = valueAccessor();
    //here we first create a jQuery object by using $(myelem)
    //before updating observable value
    value($(element).first());
  }
};

例如，然后可以像这样使用$ el：

var myViewModel = function(){
  var self = this;

  //plain DOM element reference
  self.el = ko.observable();

  //jquery object reference
  self.$el = ko.observable();

  self.myFunction = function() {
    console.log(self.$el().html());
    self.$el().addClass("myCssClass");
  }
}

希望这可以帮助！