ASP.Net Web Api + KnockoutJs + MVC4 - 将它绑在一起

Question

我正在开始一个新项目,并且热衷于使用对我来说很新的KnockoutJS + Web Api,我对Web Api有很好的理解,但Knockout目前很难理解.

这是我最初想要我的应用程序如何工作的想法:

• 我有一个标准的MVC控制器,如 LeadsController
• LeadsController有一个Action被调用ListLeads,但实际上并没有返回任何数据,只是返回一个带有模板的视图来显示来自Knockout的数据.
• 该ListLeads视图LeadsApiController通过ajax 调用我的api控制器以获取要显示的潜在客户列表
• 然后将潜在客户数据映射到KnockoutJs ViewModel(我不想将我的视图模型从服务器端复制到JavaScript视图模型中)
• 我希望尽可能多地使用外部JavaScript文件,而不是让我的HTML页面充满JavaScript.

我见过很多例子,但大多数都在第一页加载时返回一些初始数据,而不是通过ajax调用.

所以我的问题是,当从ajax中检索时,如何为Knockout创建我的JavaScript viewModel,其中ajax url是使用创建的Url.Content().

另外,如果我需要在此ViewModel上有额外的计算值,我将如何从服务器端扩展映射的视图模型.

如果我没有很好地解释自己,请告诉我你不确定的内容,我会尝试更新我的问题以使其更加明确.

Answer 1

我认为您的设计是一个好主意。实际上，我现在正使用这种设计来开发应用程序！

您不必在页面中嵌入初始数据。相反，在页面加载时，创建一个空的视图模型，调用ko.applyBindings，然后启动一个AJAX调用，该调用将在完成时填充视图模型：

$(function () {
    var viewModel = {
        leads: ko.observableArray([]) // empty array for now
    };

    ko.applyBindings(viewModel);

    $.getJSON("/api/Leads", function (data) {
        var newLeads = ko.mapping.fromJS(data)(); // convert to view model objects
        viewModel.leads(newLeads); // replace the empty array with a populated one
    });
});

您需要在页面上的某处放置“正在加载”消息，直到AJAX调用完成。

要生成“ / api / Leads” URL，请使用Url.RouteUrl：

<script>
    var apiUrl = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Leads" })';
</script>

（假设您在Global.asax或App_Start \ RouteConfig.cs中配置的API路由名为“ DefaultApi”。）

剔除映射插件在上方用于将AJAX JSON结果转换为剔除视图模型。默认情况下，对于JSON中的每个属性，生成的视图模型将具有一个可观察的属性。要对此进行自定义（例如添加其他计算的属性），请使用基因剔除映射插件的“ create”回调。

在我的应用程序中了解到这一点之后，我发现我希望从服务器端视图模型中获得更多可用于客户端代码的元数据，例如需要哪些属性以及每个属性上的验证。在敲除映射“创建”回调中，我需要此信息，以便在视图模型中自动生成其他属性和计算出的可观察对象。因此，在服务器端，我使用了一些MVC框架类和反射来检查视图模型，并生成一些元数据作为JavaScript，并将其嵌入相关视图中。在客户端，我有外部JavaScript文件，这些文件连接了敲除映射回调并根据页面中提供的元数据生成视图模型。我的建议是首先在每个视图中手动编写敲除视图模型定制和其他JavaScript，然后在重构时将通用JavaScript函数移至外部文件中。每个视图都应该只包含特定于该视图的最少JavaScript，这时您可以考虑编写一些C＃以从服务器端视图模型注释生成该JavaScript。