获取关联ViewModel（KnockoutJS）的DOMElement的简单方法

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

你是否需要以这种方式达到特定项目？如果你不这样做，你可以使用点击绑定：

<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绑定并通过jquery访问特定元素：

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

然后在按钮点击功能内部使用项目的id属性到达li：

$（ “利[liId = 1]”）;

请查看此link

的详细信息