javascript - Generating IDs within Knockout Foreach loops - Stack Overflow

admin管理员组

文章数量:1277875

I'm trying to build some HTML with Knockout that Jquery UI can turn into toggle buttons. What I need to arrive at is this:

<div id="status">
    <input type="radio" id="status_ACTIVE" value="ACTIVE" name="status" /><label for="status_ACTIVE">Active</label>
    <input type="radio" id="status_INACTIVE" value="INACTIVE" name="status" checked="checked" /><label for="status_INACTIVE">Inactive</label>
</div>

Using JQuery UI I can easily turn that into toggle buttons. But how do I generate that without using the now depreciated JQuery Templates? This is what I attempted to do:

Inside the javascript model:

self.statuses = [{Selected:true,Text:"Active",Value:"ACTIVE"},{Selected:false,Text:"Inactive",Value:"INACTIVE"}];

The markup:

<div id="status" data-bind="foreach: statuses">
    <input type="radio" name="status" data-bind="value: Value, id: 'status_' + Value" /><label data-bind="text: Text, for: 'status_' + Value"></label>
</div>

This doesn't work. I don't think it likes how I'm trying to create that ID, or associate it with the for in the loop. It draws the buttons incorrectly, as two independent buttons and the click functionality doesn't work.

Even if I just specify the value as the id like: id: Value and for: Value it still doesn't work. Can I not set these attributes using knockout?

I'm trying to build some HTML with Knockout that Jquery UI can turn into toggle buttons. What I need to arrive at is this:

<div id="status">
    <input type="radio" id="status_ACTIVE" value="ACTIVE" name="status" /><label for="status_ACTIVE">Active</label>
    <input type="radio" id="status_INACTIVE" value="INACTIVE" name="status" checked="checked" /><label for="status_INACTIVE">Inactive</label>
</div>

Using JQuery UI I can easily turn that into toggle buttons. But how do I generate that without using the now depreciated JQuery Templates? This is what I attempted to do:

Inside the javascript model:

self.statuses = [{Selected:true,Text:"Active",Value:"ACTIVE"},{Selected:false,Text:"Inactive",Value:"INACTIVE"}];

The markup:

<div id="status" data-bind="foreach: statuses">
    <input type="radio" name="status" data-bind="value: Value, id: 'status_' + Value" /><label data-bind="text: Text, for: 'status_' + Value"></label>
</div>

This doesn't work. I don't think it likes how I'm trying to create that ID, or associate it with the for in the loop. It draws the buttons incorrectly, as two independent buttons and the click functionality doesn't work.

Even if I just specify the value as the id like: id: Value and for: Value it still doesn't work. Can I not set these attributes using knockout?

• javascript
• jquery-ui
• mvvm
• knockout.js

Share Improve this question Follow edited Jan 25, 2012 at 19:56 Arbiter asked Jan 25, 2012 at 19:48 ArbiterArbiter 1,02411 gold badge1111 silver badges2424 bronze badges 1

• Looks like there isn't a binding for the attributes "id" or "for." I need to write a custom binding for it. knockoutjs./documentation/custom-bindings.html – Arbiter Commented Jan 25, 2012 at 20:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Adding this javascript solved my issue:

ko.bindingHandlers.id = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).attr('id', valueAccessor());
    }
};

ko.bindingHandlers.forattr = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).attr('for', valueAccessor());
    }
};

I did have to change for: 'status_' + Value into foratt: 'status_' + Value as for is a reserved word.

Update: I could have also used the "attr" binding, like this:

attr: { for: 'status_' + Value }

本文标签： javascriptGenerating IDs within Knockout Foreach loopsStack Overflow