1

コントロールを表示するためにノックアウト JS テンプレートを使用しています。ただし、チェックボックスは常にチェック済みとして表示されます。以下では、文字列プロパティであるチェックボックスに ActualValue プロパティをバインドしています。

jQuery テンプレート 

<script type="text/x-jquery-tmpl" id="membershipMetaDataTemplate">
<tr>
    <td><span data-bind="text: DisplayName" ></span></td>
    {{if ObjectType() == 'string'}}
        <td><input type="text" data-bind="value: ActualValue, disable: ReadOnly" />
    {{/if}}

    {{if ObjectType() == 'boolean'}}
        <td><input type="checkbox" data-bind="checked: ActualValue, disable: ReadOnly" /></td>
    {{/if}}

    {{if ObjectType() == 'dropdown'}}
          <td><select data-bind="options: PermittedValues, value: ActualValue, disable: ReadOnly, optionsCaption: 'Choose...'"/></td>
    {{/if}}

</tr>

ありがとう

4

2 に答える 2

3

ajax された JSON オブジェクトの配列をマッピングしているインスタンスがあったため、計算された監視可能な変数の作成が面倒でした。

この状況では、カスタム バインダーの方が邪魔にならないことがわかりました。

これが私が使用したものです-

ko.bindingHandlers.stringToBool = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)     {

        var value = valueAccessor();
        var val = value().toLowerCase() === 'true';
        $(element).prop('checked', val);
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).prop('checked'));
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel,    bindingContext) {



    }
};

次に、在庫チェックされたバインディングの代わりにこれを使用してバインドします

入力タイプ="チェックボックス" データバインド="stringToBool: 値"

于 2012-12-12T02:18:59.263 に答える
3

JavaScriptでこれを試してください：

alert(new Boolean("true"));
alert(new Boolean("false"));
alert(new Boolean(""));

最初の 2 つはtrueと表示され、3 番目はfalseと表示されます。これは、JavaScript では、空でない文字列がブール値の trueに変換されるためです。

"false"あなたの例では、文字列をチェックボックスに渡しているように聞こえます。文字列"false"は空でない文字列であるため、ブール値trueを持ち、チェックボックスにチェックが入ります。

これに対する 1 つの解決策は、文字列を期待されるブール値に変換する書き込み可能な計算オブザーバブルを定義することです。"true""false"

var viewModel = {
    ActualValue: ko.observable("false")
};

viewModel.ActualValueAsBoolean = ko.computed({
    read: function () { return this.ActualValue() === "true"; },
    write: function (newValue) { this.ActualValue(newValue ? "true" : "false"); },
    owner: viewModel
});

ko.applyBindings(viewModel);

次に、ActualValueAsBoolean代わりににチェックをバインドしますActualValue。

于 2012-08-17T12:41:22.993 に答える