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

Question

我正在尝试使用服务器中的一些初始值填充knockoutjs View 模型，我使用的是ASP.Net MVC，所以我这样做的方式是将mvc View 模型传递给 View :

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);
}

在 View 内，我将 viewmodel 转换为 json 字符串并将其绑定(bind)到 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>

在我的 knockout JavaScript 中，我使用数据填充 knockout View 模型:

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);
}

在这个阶段一切都会被填充:

生成的 json 字符串是:

问题:

<强>1。问题是，当我更改某些值时，它们不会绑定(bind)，只有标题和语句更改:

生成的 json，如您所见，只有标题和语句发生变化，公司内部的值没有变化

<强>2。当再次保存这些数据时，如何让服务器端知道哪些内容已编辑、哪些内容已删除，如何使用 MVC 和 Entity Framework 跟踪它们，并相应地更改数据库

更新

我的knockout javascript，我已经定义了这些可观察量，如何在可观察数组中定义它们

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) || '');
}

现在，当您将公司可观察量绑定(bind)到 UI 时， View 模型上的每个数组元素都将保持同步。

关于你的第二个问题，我建议使用像 breeze.js 这样的 ORM它为您进行更改跟踪。 Breeze.js 有一个 tutorial使用knockout.js。