jquery - 获取关联 ViewModel 的 DOMElement 的简单方法 (KnockoutJS)

Question

描述

我有一个包含数组的viewModel。

现在我想获取数组中一项的关联 dom 元素。

问题:如何获取数组中一项的 DOM 元素？

示例

<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

简单的用户界面

<span data-bind="text: name"></span>
<ul data-bind="foreach: items">
    <li><span data-bind="text: id"></span></li>
</ul>

<button>click me</button>

JavaScript

<script type="text/javascript">
    // define demo viewModel
    var ViewModel = function (name) {
        self = this;
        self.name = ko.observable(name);
        self.items = ko.observableArray();
    };

    // define demo itemsModel
    var ItemsModel = function (id) {
        self = this;
        self.id = ko.observable(id);
    };

    // create viewModel
    var viewModel = new ViewModel("Hello World!");

    // push some items
    viewModel.items.push(new ItemsModel(1));
    viewModel.items.push(new ItemsModel(2));
    viewModel.items.push(new ItemsModel(3));

    ko.applyBindings(viewModel);

    $(function () {
        $("button").click(function () {
            var itemsModel = viewModel.items()[1];
            var id = itemsModel.id();

            // how can i get the <li> element ?
            var domElement = ???;
        });
    });
</script>

Answer 1

您真的需要通过这种方式到达特定项目吗？如果不这样做，您可以使用点击绑定(bind)来实现此目的:

<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: id"></span>
        <a href="#" data-bind="click:function(event,data){ itemClick(this,event) }">Click Item</a>
    </li>
</ul>


var ViewModel = function (name) {
        ...

        this.itemClick(item,event) {      

          // You can reach the clicked item like this $(event.currentTarget)  
          console.log($(event.currentTarget));

        };

        ...
}

编辑:

或者您可以使用 attr 绑定(bind)并通过 jquery 到达特定元素:

<ul data-bind="foreach: items">
    <li data-bind="attr: {'liId': id}">
        <span data-bind="text: id"></span>         
    </li>
</ul>

然后在按钮单击函数内到达具有项目 id 属性的 li:

$("li[liId=1]");

查看此 link 的更多信息