Knockout foreach - set attr

Question

Hello I'm using knockout foreach to generate my layout. I have problems with settings attributes in proper way. Here is my code:

   <div class="row" data-bind="foreach: points">
        <div class="col-md-4" id="oferty" data-bind="event: { mouseenter: $parent.mouseEnter, mouseout: $parent.mouseOut}">
            <h2 data-bind="text: name"></h2>
            <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
            <p>
                <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a>
            </p>
        </div>
    </div>

I need to populate in some way attribute data-name with my points -> name data. To get something like here:

    <div class="col-md-4" data-name="Test1" id="oferty">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4" data-name="Test2" id="oferty">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>

I tried:

addAttributes: {'data-name': name}

and

attr: {'data-name': name}

But none of them works. Can someone suggest my simple solution of my problem?

Update1 Answer for the nemesv No errors in the console.

    var poszukiwane = $(this).attr("data-name");
    console.log(poszukiwane);

Above code always returns undefined...

Update2: adding Jsfiddle:

http://jsfiddle.net/nnsBQ/3/

But don't know how to include more than 1 js framework there so will throw error in one line

Answer 1

Knockout does not set the this to the current element inside the event binding handlers.

So you need to use the second argument of the handler function which is the event object and get the data from there:

self.mouseEnter = function (viewModel, event) {
    var poszukiwane = $(event.currentTarget).data("name");
    console.log(poszukiwane);
    console.log("mouseEnter");
};

Demo JSFiddle.

But you are using Knockout so this is an anti-pattern to use the data- attributes to pass around your data because you anyway have all the data in your viewmodels so you can just write:

self.mouseEnter = function (viewModel, event) {
    var poszukiwane = viewModel.name; //viewModel is the currently hovered point
    console.log(poszukiwane);
    console.log("mouseEnter");
};

Demo JSFiddle.