描述
我有一个包含数组的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>
最佳答案
您真的需要通过这种方式到达特定项目吗?如果不这样做,您可以使用点击绑定(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 的更多信息
关于jquery - 获取关联 ViewModel 的 DOMElement 的简单方法 (KnockoutJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11842628/