0

次の質問で述べたように、ID を View から ViewModel に GET 関数のパラメーターとして渡すにはどうすればよいですか? MVC4、knockoutJS、Web API、Bootstrap、MSSQL Server 2012 などを使用して、MVC アプリケーションを開発しています。テーブルを作成し、ノックアウトJSを使用してDBからのデータにバインドするために、DataTables jQueryライブラリを使用しています。次の 2 つの問題が発生しています。テーブルを data-bind="foreach: regionsListModel.regions" でバインドすると、テーブルにデータが入力されますが、その最後に「テーブルにデータがありません」という行が追加されます。テーブルのフッターには、「0 件の結果のうち 0 件から 0 件を表示しています」と表示され、ページネーションはなく、結果をフィルタリングしようとすると、テーブルが完全に空になります。ヘッダーを使用して列を並べ替えると、同じことが起こります。

コードスニペットをもう一度投稿します。

ビューモデル:

    var regionsModel = {
    regionId: ko.observable(),
    companyId: ko.observable(),
    name: ko.observable(),
    companyName: ko.observable()    
};

var regionsListModel = {
    regions: ko.observable()
};

function getRegions() {
    get(apiUrl + "Regions/GetRegions", {}, function (data) {
        regionsListModel.regions(data);
    });
}

function getRegion() {
    get(apiUrl + "Regions/GetRegion", { aiId: regionsModel.regionId() }, function (data) {
        regionsModel.regionId(data.RegionID);
        regionsModel.companyName(data.CompanyName);
        regionsModel.companyId(data.CompanyID);
        regionsModel.name(data.Name);
    });
}

function viewRegion() {
    $("#ViewRegionModal").modal('show');
    //regionsModel.regionId($('#ViewRegion').val());
    getRegion();
    return false;
}

ビューのコード:

<table class="table table-striped table-bordered responsive" id="dtable">
                            <thead>
                                <tr>
                                    <th style="width: 20px;">ID</th>
                                    <th>Region Name</th>
                                    <th>Company Name</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: regionsListModel.regions">
                                <tr id="ViewRegion" data-toggle="modal" data-bind="click: viewRegion, value: RegionID">
                                    <td data-bind="text: RegionID"></td>
                                    <td data-bind="text: Name"></td>
                                    <td data-bind="text: CompanyName"></td>
                                </tr>
                            </tbody>
                        </table>

問題の写真: http://i.imgur.com/CNRnRlW.png

どんな助けでも大歓迎です！

編集: getRegions を呼び出すコードを追加します (これは Regions.js ファイルにあり、ViewModel は RegionsData.js に配置され、両方ともページの読み込み時に読み込まれます)。

$(function () {
    ko.applyBindings(regionsModel);

    getRegions();
    getCompanies();

    $("#NewRegionButton").click(function () {
        $("#NewRegionModal").modal('show');
        return false;
    });

    $("#ViewRegion").click(function () {
        $("#ViewRegionModal").modal('show');
        return false;
    });

    $("#NewRegionModalClose").click(function () {
        clearFields();
        $("#NewRegionModal").modal('hide');
        return false;
    });

    $("#NewRegionSave").click(function () {
        newRegion();
        $("#NewRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionClose").click(function () {
        $("#ViewRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionEdit").click(function () {
        $("#ViewRegionModal").modal('hide');
        $("#EditRegionModal").modal('show');
        return false;
    });

    $("#RegionUpdateSave").click(function () {
        updateRegion();
        $("#EditRegionModal").modal('hide');
        return false;
    });

    $("#ViewRegionEditClose").click(function () {
        clearFields();
        $("#EditRegionModal").modal('hide');
        return false;
    });
})
4

1 に答える 1

1

誰かが私と同じ問題に遭遇した場合、ここに解決策があり、完全にノックアウトフリーです:

    function updateView() {
    $("#tableProblems").dataTable({
        "bDestroy": true,
        "sDom": "<'row-fluid dt-header'<'span6'f><'span6'>r>t<'row-fluid dt-footer'<'span6'i><'span6'p>>",
        "aaData": problemsModel.problems(),
        "aoColumns": [
            { "mDataProp": "ProblemID" },
            { "mDataProp": "CategoryName" },
            { "mDataProp": "DateOpenFormatted" },
            { "mDataProp": "DateClosedFormatted" },
            { "mDataProp": "ObjectName" },
            { "mDataProp": "Nickname" }
        ]
    });
}

ページの初期化でコードのこの部分を使用しました。get* 関数を実行するときは、view 側で updateView() 関数を呼び出すだけです。tbody は完全に空のままにし、残りは DataTables が行います。

(これはリージョンではなく、私が開発している別のコンポーネントの例ですが、原則は同じです)

于 2013-10-31T12:03:25.047 に答える