如何在淘汰视图模型 js 中使用 mvc4 模型值答案

【问题标题】：how to use mvc4 model value in knockout viewmodel js如何在淘汰视图模型 js 中使用 mvc4 模型值
【发布时间】：2013-08-13 08:08:08
【问题描述】：

我正在使用带有 ASP.NET MVC 的 Knockout 这是我的视图，它由 MVC 控制器填充

HTML

<html>
 <input type="text" data-bind="value:Name" />
 <script src="/Scripts/ViewModel.js"></script>
</html>

控制器

public actionresult xyz(){
  var myModel = new FiestModel();
  myModel.Name = "James";
  return view(myModel);
}

ViewModel.Js

function mymode(){
  var self = this ;
  self.Name = ko.observable('@Model.Name');
}

在我的页面渲染完成所有这些之后，我的输入没有指定值 James 。

更新

我告诉你们整个场景，在我的应用程序中，用户点击signup with facebook 按钮，facebook 将用户返回到我的xyz 操作方法，现在我想在xyz 视图中显示用户名。那么我怎么能用 api 做到这一点，因为@Anders 说我要通过 Web APi 做到这一点。

提前致谢。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 knockout.js knockout-2.0 knockout-mvc

【解决方案1】：

您不应该混合使用服务器端 MVC 和客户端 MVVM。将模型填充移至 WebAPI 控制器方法。

使用 jQuery.getJSON 或其他 Ajax 框架加载数据您还可以使用 ko.mapping 将服务器数据映射到 ViewModels

edit: 如果 oyu 想使用 ViewModel.js 中的代码必须移动到 cshtml 文件中 @Mode.Name，但请不要这样做。

更新有点意思

[HttpGet]
public FiestModel xyz() {
   return new FiestModel("James");
}

使用类似的映射插件

ViewModel = function(data) {
   ko.mapping.fromJS(data, {}, this);
};

$.getJSON("api/myController/xyz", null, function(data) {
   ko.applyBindings(new ViewModel(data));
});

【讨论】：

查看我有问题的更新，我描述了我的整个场景。希望现在你能以更好的方式帮助我。谢谢
这是一个宽泛的问题：D 您仍然可以使用标准控件，但跳过使用 Razor 引擎获取数据，而是使用 Ajax 获取数据。

【解决方案2】：

在 JS 上尝试类似的东西：

function myModel(){
   var data = @(Html.Raw(Json.Encode(Model)));
   this.Name = ko.observable(data.Name);
}

然后你绑定你的视图模型：

ko.applyBindings(new myModel());

【讨论】：

Inline/Unobtrusive JS 是一种反模式