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

Posted 2023-03-27

【中文标题】Knockoutjs 使用 MVC 从服务器填充数据

【英文标题】：Knockoutjs populating data from server with MVC

【发布时间】：2015-04-28 06:01:17

【问题描述】：

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

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>

在我的淘汰赛 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);

在这个阶段一切都被填充了：

得到的json字符串是：

问题：

1.问题是某些值在我更改它们时没有绑定，只有标题和语句更改：

生成的 json，如您所见，只有标题和语句更改，公司内部的值不会更改

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

更新

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

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

【参考方案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) || '');

现在，当您将公司 observables 绑定到 UI 时，视图模型上的每个数组元素都将保持同步。

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

【讨论】：

效果很好，只有一个问题 if 语句和 or 语句有什么用处。

if 语句允许将Company 作为函数调用并使用new 构造。 || 表达式设置默认值以防 json 缺少元素。

【参考方案2】：

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

在此处查看此帖子： https://www.airpair.com/knockout/posts/top-10-mistakes-knockoutjs#8-observable-arrays-don-t-automatically-have-observable-members