Setting the id attribute with knockoutjs including a prefix

knockout-2.0knockout.js

I'm using KnockoutJS to iterate over an object, like this:

Now this all works. But the problem i have is that it sets the id of the button to just a number. So it looks like this:

<button id="1">Button 1</button>
<button id="3">Button 2</button>
<button id="8">Button 3</button>

So i tried to put a prefix in front of the the 'Id' property, like so:

<div data-bind="foreach:Items">
    <button data-bind="text: Name, attr: {'id': 'myprefix_' + Id}"></button>
</div>

But that doesn't seem to be working. My id gets filled with some Knockout observable function when i do it like that…

So my question is, how can i add a prefix when i specify the id attribute of a field?

Best Answer

Actually used this today - to unwrap the observable I had to do:

<button data-bind="attr: { id: 'prefix_' + $index() }"> Send </button>

Hope this helps.

Related Solutions

Javascript – How to get Knockout JS to data-bind on keypress instead of lost-focus

<body>
        <p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
        <p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
</body>

From the documentation

Additional parameters

valueUpdate

If your binding also includes a parameter called valueUpdate, this defines which browser event KO should use to detect changes. The following string values are the most commonly useful choices:

"change" (default) - updates your view model when the user moves the focus to a different control, or in the case of elements, immediately after any change

"keyup" - updates your view model when the user releases a key

"keypress" - updates your view model when the user has typed a key. Unlike keyup, this updates repeatedly while the user holds a key down

"afterkeydown" - updates your view model as soon as the user begins typing a character. This works by catching the browser’s keydown event and handling the event asynchronously.

Of these options, "afterkeydown" is the best choice if you want to keep your view model updated in real-time.

Javascript – When to use ko.utils.unwrapObservable

You should use ko.utils.unwrapObservable in cases where you don't know if you have been given an observable or not. This would commonly be in a custom binding where an observable or non-observable could be bound against it.

In the code that you have above, the call to valueAccessor() is not actually unwrapping an observable. It is just retrieving the value that was passed to the binding in the correct context (it gets wrapped in a function to protect it). The return value of valueAccessor() may be an observable or not. It is whatever was passed to the binding.

Best Answer

Related Solutions

Javascript – How to get Knockout JS to data-bind on keypress instead of lost-focus

Additional parameters

Javascript – When to use ko.utils.unwrapObservable

Related Topic