javascript - observableArray 中的动画元素

Question

我想为可观察数组中的元素设置动画。

我不会在 observableArray 中添加或删除项目。

考虑到以下 jsfiddle，我想调用 animateFirstElement 函数并突出显示行星“Mercury”

我可以很容易地拿到元素。但我不知道如何获取它对应的 HTML 元素:

this.animateFirstElement = function() {
    alert(this.planets()[0].name);
}; 

http://jsfiddle.net/8k8V5/2644/

Answer 1

我支持@CrimsonChris 在评论中所说的，尽管这两种方式都相当简单。默认情况下，Knockout 将参数 data, event 传递给 View 上的任何绑定(bind)。因此，例如，如果你想在用户点击时突出显示一个行星，你可以这样做:

<div data-bind="attr: { 'class': 'planet ' + type }, 
                text: name, 
                click: highlightElement"> </div>

在 highlightElement 中:

function highlightElement(data, e) {
  var target = e.target || e.srcElement;
  myHighlightFunction(target);
}

如果你想从父上下文中触发 Action ，你可以将一个好的 ol' id 属性粘贴到容器，例如 planet-list，和动画添加/在 Knockout 之外使用 jQuery 进行删除，例如:

this.removeFirstElement = function() {
    var target = document.getElementById('planet-list'),
        planet = target.children[0];
    $(planet).slideUp(400,function() { self.planets.shift(); });
};

您也可以在 knockout 中执行此操作，例如通过构建自定义绑定(bind) controls descendant bindings ，或者您可以使用 planetsToShow.subscribe 在数组变小/变大时相应地设置动画。请注意，在 View 中，您可以完美地将 $element 传递给函数，或者 $index(如我下面的测试中所示)

我对你的 fiddle 做了一些修改，检查一下:http://jsfiddle.net/8k8V5/2652/