0

こちらを参照してください。

オブジェクト (オブザーバブルなし) をチェックボックスとラジオ値にバインドして、取得する値 (値と値) が通常のオブジェクト (オブザーバブルなし) になるようにする方法。

HTML:

Selection List 
<a class="pull-right" href="#" data-bind="click: addChoice">+</a>           
<table class="selection" data-bind="foreach: Choices">
<tr>
    <td><input type="text" data-bind="value: Id" /></td>
    <td><input type="text" data-bind="value: Text" /></td>
</tr>
</table>
Checkbox Values: <br />
<!-- ko foreach: {data: Choices() } -->
<input type="checkbox" data-bind="value: ko.toJS($data), checked: $root.Values" /><span data-bind="text: Text" ></span><br />
<!-- /ko -->
Radio Value: <br />
<!-- ko foreach: {data: Choices() } -->
<input type="radio" data-bind="value: ko.toJS($data), checked: $root.Value" /><span data-bind="text: Text" ></span><br />
<!-- /ko -->
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

Javascript:

function VM () {
var self = this
self.Value = ko.observable()
self.Values = ko.observableArray([])

self.Choices = ko.observableArray([])
self.Choice = function (id, text) {
    this.Id = ko.observable(id)
    this.Text = ko.observable(text)
}
self.addChoice = function () { self.Choices.push(new self.Choice("C" + (self.Choices().length + 1), "Text Here")) }
}
var vm = new VM()
ko.applyBindings(vm)
4

1 に答える 1

2

チェックボックスに必要なものを提供するカスタム バインディングについては、この回答 ( https://stackoverflow.com/a/14863924/1287183 ) を参照してください。以下は、値が であると仮定する単純なバージョンです$data。

ko.bindingHandlers.checkedInArray = {
    init: function (element, valueAccessor, all, vm, bindingContext) {
        ko.utils.registerEventHandler(element, "click", function() {
            var array = valueAccessor(), // don't unwrap array because we want to update the observable array itself
                value = bindingContext.$data,
                checked = element.checked;
            ko.utils.addOrRemoveItem(array, value, checked);
        });
    },
    update: function (element, valueAccessor, all, vm, bindingContext) {
        var array = ko.utils.unwrapObservable(valueAccessor()),
            value = bindingContext.$data;

        element.checked = ko.utils.arrayIndexOf(array, value) >= 0;
    }
};

HTML は次のようになります。

<input type="checkbox" data-bind="checkedInArray: $root.Values" />

ラジオ ボタンに対して同様に機能するバインディングを次に示します。

ko.bindingHandlers.checkMe = {
    init: function (element, valueAccessor, all, vm, bindingContext) {
        ko.utils.registerEventHandler(element, "click", function() {
            var checkedValue = valueAccessor(),
                meValue = bindingContext.$data,
                checked = element.checked;
            if (checked && ko.isObservable(checkedValue)) {
                checkedValue(meValue);
            }
        });
    },
    update: function (element, valueAccessor, all, vm, bindingContext) {
        var checkedValue = ko.utils.unwrapObservable(valueAccessor()),
            meValue = bindingContext.$data;

        element.checked = (checkedValue === meValue);
    }
};

ここで彼らは動いています：http://jsfiddle.net/mbest/kf6U8/3/

于 2013-03-05T03:40:16.910 に答える