0

メイン ページでの選択に基づいてデータをロードするモーダル ボックスがあります。これは、後でアプリケーションの他の側面で使用される knockout.js を使用するための良い導入になると考えました。モーダルにはBootstrapモーダルを使用しています。

これが私がしたいことです：

  1. ボタンを押して、処理するタイムシートを選択します。各タイムシートには異なる ID があります。
  2. そのタイムシートに詳細を表示します。
  3. そのタイムシートに問題がある場合は、エラーをリストします。
  4. 問題がなければ、署名できるようにします。

だから私は自分のモーダルを次のように定義しています：

<div class="modal hide fade" id="signModal" tabindex="-1" role="dialog" aria-labelledby="signModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Sign time sheet</h3>
</div>
<div class="modal-body">
    <div data-bind="foreach: summary">
        <p><span data-bind="text: HoursCodeDescription"></span>(<span data-bind="text: HoursCode"></span>) - <span data-bind="text: TotalHours"></span></p>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-danger" type="button" data-dismiss="modal">Cancel</button>
    <button class="btn btn-success disabled">Sign time sheet</button>
</div>
</div>

次に、この記事を使用してデータの概要を取得しています

<script>
    var id = 0;
    var viewModel;

    $(document).ready(function () {

        // Sign the timesheet
        $('.signTimesheet').click(function () {
            id = $(this).closest("div").find("h3.empId").attr("id");
            $('#signModal').modal('show');
            viewModel = SummaryViewModel();

        });
    });

    function SummaryViewModel() {
        var _this = {}

        _this.summary = ko.observableArray();
        ko.applyBindings(_this, $('.modal-body').get(0));

        function LoadSummary() {
            $.ajax({
                'beforeSend': function (xhrObj) {
                    xhrObj.setRequestHeader("Content-Type", "application/json");
                    xhrObj.setRequestHeader("Accept", "application/json");
                },
                'async': false,
                'cache': false,
                'dataType': 'text json',
                'data': ({ "id": id }),
                'url': '/api/Timesheet/',
                'type': 'GET',
                'success': function (data) {
                    var results = ko.observableArray();
                    ko.mapping.fromJS(data.HoursSummary, {}, results);
                    for (var i = 0; i < results().length; i++) {
                        _this.summary.push(results()[i]);
                    };
                }
            });
        }

        LoadSummary();

        return _this;
    }
</script>

私が取っているアプローチで何かが欠けていると確信していますが、私が望むように動作する例は見つかりません。どんな助けでも大歓迎です。

4

1 に答える 1

1

これが私が実際にやらなければならなかったことです：

<script>
    var id = 0;
    var viewModel = {
        summary: ko.observableArray([{ HoursCodeDescription: "", HoursCode: "", TotalHours: 0 }])
    };

    $(document).ready(function () {

        ko.applyBindings(viewModel);

        // Sign the timesheet
        $('.signTimesheet').click(function () {
            id = $(this).closest("div").find("h3.empId").attr("id");
            $('#signModal').modal('show');
            $.ajax({
                'beforeSend': function (xhrObj) {
                    xhrObj.setRequestHeader("Content-Type", "application/json");
                    xhrObj.setRequestHeader("Accept", "application/json");
                },
                'async': false,
                'cache': false,
                'dataType': 'text json',
                'data': ({ "id": id }),
                'url': '/api/Timesheet/',
                'type': 'GET',
                'success': function (data) {
                    viewModel.summary(data.HoursSummary);
                }
            });

        });
    });
</script>
于 2013-04-17T16:16:07.210 に答える