如何使Knockout.Mapping在ASP.NET Web App中工作？

Question

我正在构建MVC5 Web应用程序，并希望使用Knockout.js创建动态页面视图。但是，我发现Knockout.Mapping似乎在我的项目中没有正常工作。

如您所见，Intellisense没有对映射插件的建议（我在_reference.js中包含了插件的引用）。当我强行完成此行时，它无法显示第二个警告。

我是否还需要做些更多工作才能使其正常工作？

@if (false)
{
<script src = "~/Scripts/knockout-3.4.0.js" ></script >
<script src = "~/Scripts/knockout.mapping-latest.js"></script >
}

<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-3.4.0.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/knockout.mapping-latest.js")"></script>

//~~body~~//

<script type="text/javascript">
alert("1");
var json = '@Html.Raw(Json.Encode(Model))';
b = ko.mapping.fromJson(json); //"mapping" is not suggested when "ko." is put.
//b = ko.mapping.fromJson(Model); //mistake at the original post
ko.applyBindings(b);
alert("2"); // not showed when the previous two lines is active.
</script>

Answer 1

查看可用的帮助here。

我认为您需要创建映射的示例如下：

ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)))

Answer 2

试试这个。

 var ViewModel = function() {
   var self = this;

   self.formData2 = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
 }

并在您的控制器中：

public ActionResult Index()
    {

        return View(new ExecutivoViewModel());
    }

我的ViewModel类：

 public class ExecutivoViewModel
{
    public ExecutivoViewModel() { }

    public ExecutivoViewModel(Executivo entidade)
    {
        this.ExecutivoId = entidade.ExecutivoId;
        this.Nome = entidade.Nome;
        this.Cargo = entidade.Cargo;
        this.Inativo = entidade.Inativo;
    }

    [DisplayName("Executivo ID")]
    [Required]
    public int ExecutivoId { get; set; }

    [DisplayName("Nome")]
    [MaxLength(50)]
    [Required]
    public string Nome { get; set; }

    [DisplayName("Cargo")]
    [MaxLength(50)]
    [Required]
    public string Cargo { get; set; }

    [DisplayName("Inativo")]
    public bool Inativo { get; set; }

Answer 3

很抱歉延迟跟进。最后，我使用

使其工作

<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>    

//~~body~~//

@section scripts{
        <script src="~/Scripts/knockout-3.4.0.js"></script>
        <script src="~/Scripts/knockout.mapping-latest.js"></script>
}

并通过

显示建议

/// <reference path="knockout.mapping-latest.js" />

在_reference.js中引用knockout.js核心库之后

。