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数据。

提亚

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，您将添加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());

您可以让view model接受您的JSON数据，将数据提供给person observableArray()，这样就可以做到这一点。