0

こんにちは、これを解決しようと何時間もオンラインで調べましたが、解決策が見つかりませんでした。

ASP.NET MVC と Knockout を使用してソリューションを構築しています。コントローラーは、ユーザーが選択できるオプションをビューに返します。ビューはそれを JSON に変換し、マッピング プラグインを使用してノックアウト ビュー モデルにマップします。ko.toJSON($data) を実行してテストすると、正しいデータが返されますが、アイテムが追加されたときにビューがリストを更新しないため、正しく入力されます。

私の推測では、プロパティは観察可能ではありませんが、それを修正する方法がわかりません。

これは、返される JSON の例です。

[{"キー":1,"値":"会社"}]

これは私のJavaScriptです：

function ProjectWorkedOn() {
    var self = this;
    self.client = ko.observable();
    self.job = ko.observable();
    self.project = ko.observable();
    self.workType = ko.observable();
}

function createTimesheetViewModel() {
    var self = this;

    //list of options
    self.UserClients = ko.observableArray();
    self.UserProjects = ko.observableArray();
    self.UserJobs = ko.observableArray();
    self.UserWorkTypes = ko.observableArray();

    //keep track of selected options
    self.selectedClient = ko.observable();
    self.selectedProject = ko.observable();
    self.selectedJob = ko.observable();
    self.selectedWorkType = ko.observable();

    //list to add choices in
    self.ListProjectsWorkedOn = ko.observableArray();


    self.addProjectWorkedOn = function () {
        var project = new ProjectWorkedOn();
        project.client = self.selectedClient;
        project.job = self.selectedJob;
        project.project = self.selectedProject;
        project.workType = self.selectedWorkType;
        self.ListProjectsWorkedOn.push(project)
    }
    self.removeProjectWorkedOn = function (projectWorkedOn) {
        self.ListProjectsWorkedOn.remove(projectWorkedOn)
    }

}



$(function () {
    var CreateTimesheetViewModel = new createTimesheetViewModel();

    CreateTimesheetViewModel.UserClients = ko.mapping.fromJSON('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.UserClients))');
    CreateTimesheetViewModel.UserProjects = ko.mapping.fromJSON('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.UserProjects))');
    CreateTimesheetViewModel.UserJobs = ko.mapping.fromJSON('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.UserJobs))');
    CreateTimesheetViewModel.UserWorkTypes = ko.mapping.fromJSON('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.UserWorkTypes))');

    ko.applyBindings(CreateTimesheetViewModel, document.getElementById("CreateTimesheet"));
});

これは、リストにアイテムを追加するビューの一部です。

<table>
    <tr>
        <td>
            Projects Worked On:
        </td>
        <td>
            Client: <select data-bind="options: UserClients, optionsText: 'Value', value: selectedClient"></select>
        </td>
        <td>
            Project: <select data-bind="options: UserProjects, optionsText: 'Value', value: selectedProject"></select>
        </td>
        <td>
            Job: <select data-bind="options: UserJobs, optionsText: 'Value', value: selectedJob"></select>
        </td>
        <td>
            Service: <select data-bind="options: UserWorkTypes, optionsText: 'Value', value: selectedWorkType"></select>
        </td>
        <td>
            <button data-bind="click: addProjectWorkedOn">Add Project</button>
        </td>
    </tr>
</table>

これはそれらを表示するものです：

<table>
    <tr>
        <td>Client</td>
        <td>Project</td>
        <td>Job</td>
        <td>Service</td>
        <td></td>
    </tr>
    <tbody data-bind="foreach: ListProjectsWorkedOn()">
        <tr>
            <td data-bind="text: client.Value"></td>
            <td data-bind="text: project.Value"></td>
            <td data-bind="text: job.Value"></td>
            <td data-bind="text: workType.Value"></td>
            <td><button data-bind="click: $parent.removeProjectWorkedOn">Remove</button></td>
        </tr>
    </tbody>
</table>

前もって感謝します！

編集：

私はそれを解決しました

プロジェクトを追加するには、属性を次のように設定します: project.clientValue(self.selectedClient().Value);

ビューでそれらを参照するには、それを関数として呼び出します: clientValue()

功績は、値を取得したいときにオブザーバブルを関数として呼び出す必要があることを説明した Chris Patt の功績によるものです

4

1 に答える 1

1

オブザーバブルを設定しProjectWorkedOn、選択した値を間違って取得しているためです。オブザーバブルを設定するには、関数の場合と同じようにパラメーターとして値を渡し、オブザーバブルの値を取得するには、関数のように呼び出します。(実際には関数です。):

self.addProjectWorkedOn = function () {
    var project = new ProjectWorkedOn();
    project.client(self.selectedClient());
    project.job(self.selectedJob());
    project.project(self.selectedProject());
    project.workType(self.selectedWorkType());
    self.ListProjectsWorkedOn.push(project)
}

編集

実際のJSONオブジェクト全体ではなく、文字通り選択した値が必要だと思っていました。あなたが試みていることは単に不可能です。select の値は整数または文字列でなければなりません。完全なオブジェクトにすることはできません。通常、このような処理は、最初に値/テキスト リストを返して選択項目に入力するだけで済みます。値は ID のようなものです。次に、選択時に AJAX リクエストを発行して、その ID を持つオブジェクトを取得します。

于 2013-04-29T03:42:04.667 に答える