获取数据绑定的元素(使用KnockoutJS)

Get element of data binding (with KnockoutJS)

本文关键字:使用 KnockoutJS 元素 数据绑定 获取      更新时间:2023-09-26

目标

获取触发函数的元素。

问题

查看我的代码:

    <span data-bind="ifnot: ProductLayout.existsAtSummary()">
        <button class="btn btn-success btn-small add"
            title="Adicionar à lista de comparação">
            <i class="icon-plus"></i>
        </button>
    </span>
    <span data-bind="if: ProductLayout.existsAtSummary()">
        <button class="btn btn-danger btn-small remove"
            title="Remover da lista de comparação">
            <i class="icon-remove"></i>
        </button>
    </span>

正如您所看到的,当ififnot为true或false时,我正在触发existsAtSummary()函数。

但这些按钮在前臂内部,我需要使用它们的元素,我不知道如何操作。

我的JS:

function ProductLayoutViewModel() {
    var self = this;
    self.existsAtList = function () {
        return true;
    };
}
ko.applyBindings(new ProductLayoutViewModel());

把我的代码放在这里,在JSFiddle上。

我的想法

我在想这个:

self.existsAtList = function (element) {
    console.log(element); // returns me 'undefined'
    return true;
};

但正如我所评论的,控制台会返回"未定义"。

有什么想法吗?

详细信息

如果需要,我可以使用jQuery

我想你要找的是$element:

<span data-bind="ifnot: existsAtList($element)">
    <button class="btn btn-success btn-small add" 
            title="Adicionar à lista de comparação">
        <i class="icon-plus"></i>
    </button>
</span>
<span data-bind="if: existsAtList($element)">
    <button class="btn btn-success btn-small add" 
            title="Eliminar de lista de comparação">
        <i class="icon-minus"></i>
    </button>
</span>

和:

function ProductLayoutViewModel() {
    var self = this;
    self.existsAtList = function (element) {
        console.log(element);
        return true;
    };
}
ko.applyBindings(new ProductLayoutViewModel());

请参阅http://jsfiddle.net/rSD7q/1/