Question

您好我已经在网上浏览了几个小时试图解决此问题，但我找不到解决方案。

我正在使用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解释当你想要获得它们的价值时，应该将observable称为函数

Answer 1

因为您正在设置ProjectWorkedOn可观察量并且错误地获取所选值。要设置一个observable，您可以将值作为参数传递给函数，并获取observable的值，您可以将其称为函数。（它们实际上是功能。）：

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的对象。

Knockout Mapping Observable Array MVC

1 个答案: