Question

我第一次使用Knockout和MVC。我正在尝试显示名称和姓氏，它将是静态的，并将在Controller类中定义时显示。我曾尝试过我最好的水平来显示数据，但它的输出并不像我预期的那样。我的守则如下： 模型类

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>

我的输出是这样的：

命名

姓：

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

Answer 1

H，

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

你必须在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>

Answer 2

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

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

Answer 3

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

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

这个可能是正确的：

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

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

3 个答案: