如何使用 knockout.js 映射来动态加载模态框内容？

Question

我有一个模式框，我想根据主页上的选择加载数据。我认为这将是使用 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>

然后我使用this article 提取我的数据摘要

<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>

我确信我所采用的方法遗漏了一些东西，但我找不到任何与我希望它的操作方式相似的示例。任何帮助将不胜感激。

Answer 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>