c# - KnockOutJS 绑定问题

Question

我正在使用 MVC4、jquery2.03 和 knockout2.30，但我无法看到所有家属。我在这里错过了什么吗？

模型

namespace eManager.Domain
{
    public class Dependent
    {
        public virtual int Id { get; set; }
        public virtual string Name { get; set; }
        public virtual int Age { get; set; }
    }
}

看法

@model IEnumerable<eManager.Domain.Dependent>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Total: <span data-bind="text: dependent().length">&nbsp;</span> dependents(s)</p>


<script type="text/javascript">
    var initialData = @Html.Raw(Json.Encode(Model));
    var viewModel = {
        dependent: ko.observableArray(initialData)
    };

    $(document).ready(function () { ko.applyBindings(viewModel); });
</script>

Answer 1

在我的控制器中添加了以下内容

    [HttpGet]
    public string GetDependents()
    {
        var dependents = _db.Dependents;
        return new JavaScriptSerializer().Serialize(dependents);
    }

看法

@model IEnumerable<eManager.Domain.Dependent>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Total: <span data-bind="text: dependent().length">&nbsp;</span> dependent(s)</p>


<script type="text/javascript">
    $.getJSON("http://localhost:1233/Dependent/GetDependents", function (data) {
        $.each(data, function (key, val) {
            viewModel.dependent.push(val);
        });
    });

    $(document).ready(function () { ko.applyBindings(viewModel); });
</script>

当我调用http://abc.xyz/Dependent/GetDependents 我得到以下响应 [{"RelationshipManager":{},"Id":1,"Name":"Tall Hat","Age":10}, {"RelationshipManager":{},"Id":2,"Name":"Long Cloak","Age":12}]

但它仍然没有显示计数

Answer 2

从这个 jsFiddle 可以看出，您的淘汰赛绑定很好：http: //jsfiddle.net/pdavis68/k9rG9/

这意味着问题与您的初始数据有关。将 Razor 语法放在脚本中很可能是问题所在。您可以向控制器添加一个方法，将数据作为字符串返回，然后使用$.getJSON()调用来检索数据，然后填充您的视图模型（这就是我们的代码的操作方式）。

对于您的控制器，您可以使用以下内容：

[HttpGet]
public string GetDependents()
{
    Dependent[] dependents = GetAllDependents();
    return new JavaScriptSerializer().Serialize(dependents);
}

然后在您的Javascript中，例如：

$.getJSON("http://mysite.com/controller/GetDependents", function(data) {  
     $.each(data, function(key, val) {
         viewModel.dependent.push(val);
     });
});

（这完全是我的想法，所以可能注意完全正确，但应该让你接近）。