2

描述

我有一个包含数组的 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>
4

1 回答 1

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>

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

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

查看此链接了解更多信息

于 2012-08-07T10:00:32.663 回答