Question

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

C＃class：

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

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

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

      ko.applyBindings(viewModel);
});

或者从您返回的模型中填充：

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

最后我会使用一个模板来显示这样的数据（再次简化了html for 演示，你会添加你的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（），这应该可以解决问题。

MVC Knockout Databind

2 个答案: