MVC淘汰赛数据绑定

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;
    }

Index.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映射您的视图模型并应用绑定。 我已经在此处使用了一些预先创建的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);

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

$.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/

Answer 2

查看此JS小提琴，

http://jsfiddle.net/aeHr7/

我不知道它的完整代码，但您可能缺少KO绑定。

function AppViewModel() {
    var self = this;

    self.person = ko.observableArray([{
        name: 'Bert',   Email: 'xx@abc.com'
    }, {
        name: 'Charles',
        Email: 'xx@abc.com'
    }, {
        name: 'Denise',
        Email: 'xx@abc.com'
    }]);
}

ko.applyBindings(new AppViewModel());

您可以使用视图模型来接受您的JSON数据，将该数据提供给人员observableArray（），这应该可以解决问题。