1

私はMVCでノックアウトを始めようとしており、通常のバインディング/マッピングを機能させることができましたが、コレクションに関しては行き詰まっています。これまでのところ、次のコードがあります。

public class TestViewModel
{
    public TestViewModel()
    {
        Persons = new List<Person>();
    }

    public List<Person> Persons { get; set; } 

}

public class Person
{
    public Person()
    {
    }

    public string Name { get; set; }
    public string Surname { get; set; }
    public List<string> Children { get; set; } 
}

cshtml コード:

<h2>People</h2>
<div data-bind="template: { name: 'person-template', foreach: persons }"></div>

<script type="text/html" id="person-template">
    <ul>
        <li>
            <div><span data-bind="text: name"/>&nbsp;<span data-bind="text: surname"/> has <span data-bind='text: children().length'/></div>
            <ul data-bind="foreach: children">
                <li><span data-bind="text: $data"> </span></li>
            </ul>
        </li>
    </ul>
</script>

<script type="text/javascript">

var TestModel = function(model) {
    var self = this;
    self.persons = ko.observableArray(ko.utils.arrayMap(model.Persons, function(person) {
        var per = new Person(person);
        return per;
    }));
};

var Person = function(person) {
    var self = this;
    self.Name = ko.observable(person.Name);
    self.Surname = ko.observable(person.Surname);
    self.Children = ko.observableArray(person.Children);
};


$(function() {
        var data = @(Html.Raw(Json.Encode(Model)));
        ko.applyBindings(new TestModel(data));
    });

</script>

私が抱えている問題は、マッピングが適切に行われたかどうか、またはテンプレートの出力に問題があるかどうかわかりません。

ありがとう

4

1 に答える 1

2

問題は大文字と小文字の区別にありました。これが正しいテンプレ

<script type="text/html" id="person-template">
    <ul>
        <li>
            <div><span data-bind="text: Name"/>&nbsp;<span data-bind="text: Surname"/> has <span data-bind='text: Children().length'/></div>
            <ul data-bind="foreach: Children">
                <li><span data-bind="text: $data"> </span></li>
            </ul>
        </li>
    </ul>
</script>
于 2012-12-07T07:41:47.267 に答える