Question

我正在尝试使用服务器的一些初始值填充knockoutjs viewmodel，我正在使用ASP.Net MVC，所以我这样做是将mvc viewmodel传递给视图：

public ActionResult Edit(int cvId)
{
    CV cv = repository.FindCV(cvId);

    //auto mapper mapping
    Mapper.CreateMap<CV, MyCVViewModel>();
    Mapper.CreateMap<Company, MyCompanyViewModel>();
    Mapper.CreateMap<Education, MyEducationViewModel>();
    Mapper.CreateMap<Reference, MyReferenceViewModel>();
    var model = Mapper.Map<CV, MyCVViewModel>(cv);

    return View(model);
}

在视图中我将viewmodel转换为json字符串并将其绑定到knockoutjs viewmodel，因此它将填充数据：

//mvc viewmodel
@model Taw.WebUI.Models.MyCVViewModel
//convert
@{
    var json = @Html.Raw(Model.ToJson());
}

//lastly bind
<script type="text/javascript">
    // Activate knockout binding
    var viewModel = new CVViewModel(@json);
    ko.applyBindings(viewModel);
</script>

在我的淘汰赛javascript中，我用数据填充了淘汰视图模型：

var CVViewModel = function (data) {
    var self = this;

    //list view model
    self.title = ko.observable(data.title);
    self.statement = ko.observable(data.statement);
    self.reference = ko.observable(data.reference);
    self.companies = ko.observableArray(data.companies);
    self.educations = ko.observableArray(data.educations);
    self.references = ko.observableArray(data.references);
}

此阶段的所有内容都已填充：

enter image description here

，生成的json字符串为：

enter image description here

问题：

1。问题是，当我更改它们时，某些值不会绑定，只有标题和语句更改：

enter image description here

如您所见，生成的json只有标题和语句更改，公司内部的值不会发生变化 enter image description here

2。再次保存此数据时，如何让服务器端知道已编辑的内容和已删除的内容，如何使用MVC和实体框架跟踪它们，并相应地更改数据库

更新

我是我的淘汰javascript，我已经定义了这些observable，如何在observablearray中定义它们

function Company() {
    this.companyName = ko.observable();
    this.jobTitle = ko.observable();
    this.description = ko.observable();
    this.startDate = ko.observable();
    this.endDate = ko.observable();
}

Answer 1

关于你的第一个问题：

问题是您需要为每个数组项使用ko.observable。

例如：jsfiddle

function CVViewModel(data) {
    var self = this;

    //list view model
    self.title = ko.observable(data.title);
    self.companies = ko.observableArray(data.companies.map(Company));
}

function Company(data) {
    if (!(this instanceof Company)){
        return new Company(data);
    }
    this.companyName = ko.observable(data.companyName || '');
    this.jobTitle = ko.observable(data.jobTitle || '');
    this.description = ko.observable(data.description || '');
    this.startDate = ko.observable(new Date(data.startDate) || '');
    this.endDate = ko.observable(new Date(data.endDate) || '');
}

现在，当您将公司的observable绑定到UI时，viewmodel上的每个数组元素都将保持同步。

关于您的第二个问题，我建议您使用breeze.js之类的ORM为您执行更改跟踪。 Breeze.js有tutorial使用knockout.js。

Answer 2

问题是您正在尝试更新ObservableArray中的项目。所有ObservableArray所做的就是为你维护数组模型，这意味着如果在公司中添加或删除某些东西，它会反映在数组中。为了在数组项中进行更改，您需要将ObservableArray中的每个项都设为Observable。

在这里看一下这篇文章： https://www.airpair.com/knockout/posts/top-10-mistakes-knockoutjs#8-observable-arrays-don-t-automatically-have-observable-members

Knockoutjs使用MVC从服务器填充数据

2 个答案: