c# - MVC knockout 数据绑定(bind)

Question

我对 Knockout 还是个新手。所以请原谅我的无知。这是我的代码。

C#类:

public class Person
    {

        public int Person_Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public List<Phone> PhoneNumbers;
    }

索引.cshtml:

<ul id="items" data-bind="foreach: person">
        <li class="item">
            <div class="item-meta" data-bind="text: $data.Name"></div>
            <div class="item-action">
                <span data-bind="text: $data.Email"></span>
            </div>
        </li>
    </ul>

Javascript:

function PersonViewModel() {
    var self = this;
    self.person = ko.observableArray();
    $.getJSON(baseUri, self.person); 
}

如何遍历电话列表。我可以在 Firebug 中看到 JSON 数据。

TIA

Answer 1

首先我会创建一个 Person js 对象(我在这里使用了 Id 而不是 Person_Id示例):

var Person = function (Id, Name, Email, PhoneNumbers) {
    self = this;
    self.Id = Id;
    self.Name = Name;
    self.Email = Email;        
    self.PhoneNumbers = ko.observableArray(PhoneNumbers);
}

然后是一个映射，从 json 创建 Person 对象:

    var mapping = {
        'People': {
            create: function(options) {
                return new Person(options.data.Id, options.data.Name,     
                  options.data.Email, options.data.PhoneNumbers);
            }
        }
    }

然后从实际的 json 映射您的 View 模型并应用绑定(bind)。我在这里使用了一些预先创建的 json 用于包含 2 个人的演示目的:

    var data = {"People" : [{"Id": 1, "Name":"aName", "Email":"a@a.com", 
"PhoneNumbers":["123", "456", "789"]}, {"Id": 2, "Name":"bName", "Email":"a@a.com",
"PhoneNumbers":["123", "456", "789"]}] };

    var viewModel = ko.mapping.fromJS(data, mapping);

    ko.applyBindings(viewModel);

MVC 中的上述数据变量可以从 ajax 请求中填充:

$.getJSON(baseUri, function( data ) {
      var viewModel = ko.mapping.fromJS(data, mapping);

      ko.applyBindings(viewModel);
});

或从您返回的模型中填充:

var data = @Html.Raw(Json.Encode(Model));

最后我会使用一个模板来显示这样的数据(再次简化 html演示，您将添加您的 html 标记):

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

<script type="text/html" id="person-template">
<span data-bind="text: Id" ></span><br/>    
<span data-bind="text: Name" ></span><br/>        
<span data-bind="text: Email" ></span><br/>        
<select multiple="multiple" width="50" data-bind="options: PhoneNumbers"> </select>
</script>

这是一个有效的 jsFiddle:

http://jsfiddle.net/6qsjz/23/