私のビューモデルには、trueまたはfalseの値を持つIsMale値があります。
私のUIで、次のラジオボタンにバインドしたいと思います。
<label>Male
<input type="radio" name="IsMale" value="true" data-bind="checked:IsMale"/>
</label>
<label>Female
<input type="radio" name="IsMale" value="false" data-bind="checked:IsMale"/>
</label>
私が思う問題checkedは、文字列「true」/「false」を予期していることです。だから私の質問は、このUIとモデルを使用してこの双方向バインディングを取得するにはどうすればよいですか？
1 つのオプションは、書き込み可能な計算オブザーバブルを使用することです。
この場合、書き込み可能な計算オブザーバブルをオブザーバブルの「サブオブザーバブル」にするのが良いオプションだと思いますIsMale。ビューモデルは次のようになります。
var ViewModel = function() {
this.IsMale = ko.observable(true);
this.IsMale.ForEditing = ko.computed({
read: function() {
return this.IsMale().toString();
},
write: function(newValue) {
this.IsMale(newValue === "true");
},
owner: this
});
};
次のように UI にバインドします。
<label>Male
<input type="radio" name="IsMale" value="true" data-bind="checked:IsMale.ForEditing"/>
</label>
<label>Female
<input type="radio" name="IsMale" value="false" data-bind="checked:IsMale.ForEditing"/>
</label>
これは私のために働きます：
http://jsfiddle.net/zrBuL/291/
<label>Male
<input type="radio" name="IsMale" value="1" data-bind="checked:IsMale"/>
</label>
<label>Female
<input type="radio" name="IsMale" value="0" data-bind="checked:IsMale"/>
</label>
ko.bindingHandlers['radiobuttonyesno'] = {
'init': function (element, valueAccessor, allBindingsAccessor) {
var stateHandler = function (property, allBindingsAccessor, key, value, checkIfDifferent) {
if (!property || !ko.isObservable(property)) {
var propWriters = allBindingsAccessor()['_ko_property_writers'];
if (propWriters && propWriters[key])
propWriters[key](value);
} else if (ko.isWriteableObservable(property) && (!checkIfDifferent || property.peek() !== value)) {
property(value);
}
};
var updateHandler = function () {
var valueToWrite;
if ((element.type == "radio") && (element.checked)) {
valueToWrite = element.value;
} else {
return; // "radiobuttonyesno" binding only responds to selected radio buttons
}
valueToWrite = (valueToWrite === "True") ? true : false;
var modelValue = valueAccessor(), unwrappedValue = ko.utils.unwrapObservable(modelValue); //can be true of false
stateHandler(modelValue, allBindingsAccessor, 'checked', valueToWrite, true);
};
ko.utils.registerEventHandler(element, "click", updateHandler);
// IE 6 won't allow radio buttons to be selected unless they have a name
if ((element.type == "radio") && !element.name)
ko.bindingHandlers['uniqueName']['init'](element, function () { return true });
},
'update': function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
value = value ? "True" : "False";
if (element.type == "radio") {
element.checked = (element.value == value);
}
}
};
愚かな ko 計算オブザーバブルを作成する代わりに、このバインダーを使用してください。
例：
<label>Male
<input type="radio" name="IsMale" value="True" data-bind="radiobuttonyesno:IsMale"/>
</label>
<label>Female
<input type="radio" name="IsMale" value="False" data-bind="radiobuttonyesno:IsMale"/>
</label>
ラジオ ボタンの最初の一致が文字列のみに一致し、値を文字列に設定したいことがわかったら、最初の値を文字列に変換するだけです。これを Int 値で戦わなければなりませんでした。
オブザーバブルをセットアップした後、値を文字列に変換すると、KO はそこから魔法を実行します。個々の行でマッピングする場合は、それらの行で変換を行います。
サンプル コードでは、Json を使用してモデル全体を 1 つのコマンドでマップしています。次に、Razor が変換のために引用符の間に値を挿入できるようにします。
script type="text/javascript">
KoSetup.ViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
KoSetup.ViewModel.ManifestEntered("@Model.ManifestEntered"); //Bool
KoSetup.ViewModel.OrderStatusID("@Model.OrderStatusID"); //Int
</script>
開発中に、Web ページの下部にある「すべてを画面にダンプ」を使用します。
<h4>Debug</h4>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
データ値は次のとおりです。
"OrderStatusID": 6,
"ManifestEntered": true,
そして、その後
"OrderStatusID": "6",
"ManifestEntered": "True",
私のプロジェクトでは、Bools を変換する必要はありませんでした。なぜなら、同じフラストレーションを持たないチェックボックスを使用できるからです。
エクステンダーを使用することもできるため、より多くのオブザーバブルに簡単に再利用できます。
ko.extenders.boolForEditing = function (target, allowNull) {
var result = ko.computed({
read: function () {
var current = target();
var newValue = null;
if (current === undefined || current === null || current === '') {
if (!allowNull) {
newValue = 'false';
}
} else {
newValue = current ? 'true' : 'false';
}
return newValue;
},
write: function (newValue) {
var current = target();
var valueToWrite = null;
if (newValue === undefined || newValue === null || newValue === '') {
if (!allowNull) {
valueToWrite = false;
}
} else {
valueToWrite = newValue === 'true';
}
// only write if it changed
if (valueToWrite !== current) {
target(valueToWrite);
} else {
if (newValue !== current) {
target.notifySubscribers(valueToWrite);
}
}
}
}).extend({
notify: 'always'
});
result(target());
return result;
};
次に、次のように使用します。
this.IsMale.forEditing = this.IsMale.extend({boolForEditing: true});
に指定されたパラメーターはboolForEditing、値が null であるかどうかを示します。
http://jsfiddle.net/G8qs9/1/を参照してください
3.0より前の古いバージョンのノックアウトについて多くの調査を行った後、おそらく2つの最良のオプションがあります
次のようなノックアウト エクステンダーを作成します。
ko.extenders["booleanValue"] = function (target) {
target.formattedValue = ko.computed({
read: function () {
if (target() === true) return "True";
else if (target() === false) return "False";
},
write: function (newValue) {
if (newValue) {
if (newValue === "False") target(false);
else if (newValue === "True") target(true);
}
}
});
target.formattedValue(target());
return target;
};
モデルでエクステンダーを使用するには、次のようにします。
function Order() {
this.wantsFries= ko.observable(false).extend({ booleanValue: null });
}
<span>Do you want fries with that?</span>
<label>
<input type="radio" name="question" value="True"
data-bind="value: wantsFries.formattedValue" /> Yes
</label>
<label>
<input type="radio" name="question" value="False"
data-bind="value: wantsFries.formattedValue" /> No
</label>
ソース: http://www.timlabonne.com/2013/02/building-a-knockout-js-extender-for-boolean-values/