如何在 MVC 中使用 Knockout 绑定静态数据答案

【问题标题】：How to Bind Static Data Using Knockout in MVC如何在 MVC 中使用 Knockout 绑定静态数据
【发布时间】：2013-09-05 08:46:10
【问题描述】：

我是第一次将 Knockout 与 MVC 一起使用。我正在尝试显示名称和姓氏，它们将是静态的，并将按照控制器类中定义的方式显示。我已经尽我所能来显示数据，但它的输出并不像我预期的那样。我的代码如下： 模型类

using PerpetuumSoft.Knockout;
using PerpetuumSoft;
using DelegateDecompiler;

namespace MvcApplication20.Models
{
 public class Class1
{

    public string Number { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }

 }
}

这是我的控制器类

using System.Web.Mvc;
using MvcApplication20.Models;
using PerpetuumSoft.Knockout;

namespace MvcApplication20.Controllers
{
 public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    { 
        Class1 student = new Class1();
        student.Number = "B123456";
        student.Name = "Anubhav";
        student.Surname = "Chaudhary";
        return View(student);
    }

 }
}

这是我的索引类

@using System.Web.Script.Serialization;
@model MvcApplication20.Models.Class1   

<h2>Indexer</h2>
<script src="~/Scripts/knockout-2.1.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<p> Name:<span data-bind="text:Name"></span></p>
<p> SurName:<span data-bind="text:Surname"></span></p>
<script type="text/javascript">
  $(function()
 {

     var model = @Html.Raw(Json.Encode(Model))         
        ko.applyBindings(model);
  });
  </script>

我的输出是这样的：

姓名：

姓：

如您所见，它没有显示我在编码部分提供的名称，请帮助我并告诉我该怎么做才能获得所需的输出。

【问题讨论】：

标签： knockout.js knockout-mvc

【解决方案1】：

您的 ViewModel 属性不是可淘汰的可观察属性。您可以使用knockout mapping plugin 。在这种情况下，您的 javascript 必须是：

$(function()
{
 var model = @Html.Raw(Json.Encode(Model))  
 var viewModel = ko.mapping.fromJS(data);
 ko.applyBindings(viewModel );
});

【讨论】：

感谢 Siyamad 回答我的问题，但据我所知，当我们想让任何属性可编辑时，我们会使用 Observable，但在这里我不会让它们可编辑，它们的值在任何地方都将保持不变。但是我仍然将您的代码应用于我的 JavaScript，但它无法正常工作，现在仍然没有提供所需的输出。您能提供任何其他解决方案吗！

【解决方案2】：

您能否确认所有脚本都已加载？我认为这不是正确的路径（基于标准 MVC 文件夹位置）

'<script src="~/Scripts/knockout-2.1.0.js"></script>'

这个可能是正确的：

'<script src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>'

【讨论】：

感谢 Rustam 回答我的问题，我也尝试过您的解决方案，但仍然没有给出想要的结果。

【解决方案3】：

这是一篇旧帖子。我回答这个问题是因为如果有人遇到这个问题，我的解决方案也适用于他们。

你必须在 knockout.js 插件之前添加 jquery 插件。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="~/Scripts/knockout-2.1.0.js"></script>

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

【讨论】：