2

説明

配列を含むviewModelがあります。

ここで、配列内の 1 つの項目に関連付けられた dom 要素を取得したいと考えています。

質問: 配列内の 1 つの項目の 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>

シンプルなUI

<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>

次に、ボタン クリック関数内で、アイテムの id プロパティを持つ li に到達します。

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

詳細については、このリンクをご覧ください

于 2012-08-07T10:00:32.663 に答える