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

7rtdyuoh  于 2022-11-23  发布在  其他
关注(0)|答案(2)|浏览(189)

我尝试用服务器的一些初始值填充knockoutjs viewmodel,我使用的是ASP.NetMVC,所以我做的方式是将一个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);
}

在视图中,我将视图模型转换为json字符串,并将其绑定到knockoutjs视图模型,这样就可以用数据填充视图模型:

//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视图模型:

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.问题是当我更改某些值时,它们没有绑定,只有标题和语句更改:**

如您所见,生成的json只有标题和语句发生了变化,company内部的值没有变化

    • 2、再次保存这些数据时,如何让服务器端知道哪些被修改了,哪些被删除了,如何使用MVC和实体框架来跟踪它们,并相应地改变数据库**
    • 更新**

我的kockout javascript,我已经定义了这些可观察性,如何在可观察性列表中定义它们

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

zpqajqem1#

第一个问题:
问题是您需要对每个数组项使用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) || '');
}

现在,当您将company observables绑定到UI时,视图模型上的每个数组元素都将保持同步。
关于你的第二个问题,我建议使用一个ORM,比如breeze.js,它可以为你做修改跟踪。

bq9c1y66

bq9c1y662#

问题是您正在尝试更新ObservableArray中的项目。ObservableArray所做的一切都是为您维护数组模型,这意味着如果您在公司的可观察项中添加或删除某些内容,它将反映在数组中。为了在数组项目中进行更改,您需要将ObservableArray中的每个项目都设置为Observable。
看看这篇文章:https://www.airpair.com/knockout/posts/top-10-mistakes-knockoutjs#8-observable-arrays-don-t-automatically-have-observable-members

相关问题