0

以下は、KnockOut JSを使用したMVCアプリコードです。「onClick」イベント「SetData()」を使用した送信ボタンがあります。

選択したチェックボックスのすべてのIDを取得する方法、KnockOut OnSubmit内で機能するコメント付きコードを配置しましたが、外部にしたいのですが、

///

@model Demo.Web.ViewModels.HomeViewModel
@{
   ViewBag.Title = "Two Page";
 }
@using (Html.BeginForm())
{
<table>
    <tr>
        <td>
            <span data-bind="foreach: pageOptions">
                <input type="checkbox" data-bind="checked: IsChecked" />
                <span data-bind="text: OptionName"></span>
                <br />
            </span>
        </td>
    </tr>
</table>

<input type="submit" name="send" value="Send" onclick="SetData();" />
}

<script type="text/javascript">
var viewModel = {
    pageOptions: ko.observableArray([{"OptionCode":1,"OptionName":"Option 1","IsChecked":true},{"OptionCode":2,"OptionName":"Option 2","IsChecked":false},{"OptionCode":3,"OptionName":"Option 3","IsChecked":true},{"OptionCode":4,"OptionName":"Option 4","IsChecked":true}]),
    IsChecked: ko.observableArray()
    };

$(function() {
        ko.applyBindings(viewModel);
    });


function SetData() {
    alert('f');
    //         var ids = [];
   //                $.each(this.pageOptions(), function(n, item) {
   //                    if(item.IsChecked)
   //                    ids.push(item.OptionCode);
   //                });
   }

  </script>     

///
4

1 に答える 1

0

IsChecked: ko.observableArray()

使用されることはありません。pageOptions要素のIsCheckedプロパティをobservable()として定義します。

var viewModel = {
    pageOptions: ko.observableArray([{"OptionCode":1,"OptionName":"Option 1","IsChecked": ko.observable(true)},{"OptionCode":2,"OptionName":"Option 2","IsChecked": ko.observable(false)},{"OptionCode":3,"OptionName":"Option 3","IsChecked":ko.observable(true)},{"OptionCode":4,"OptionName":"Option 4","IsChecked":ko.observable(true)}]),
    IsChecked: ko.observableArray() ---> delete this, you don't need it
};

次に、ノックアウトドメインの外部で、次の方法で値にアクセスできます。

for(var i = 0; i < viewModel.pageOptions().length; i++) {
    if(viewModel.pageOptions()[i].IsChecked()) { 
        ---> the logic you want to use 
    }
}

チェックボックスがko.observable()でデータバインドされている限り、ノックアウトはJSONオブジェクトのIsCheckedプロパティを更新します。値(true / false)を使用してデータバインドしただけの場合、ユーザーがhtmlコントロールをオンまたはオフにしても、オブジェクトは更新されません。

于 2012-10-16T17:29:51.320 に答える