MVC 淘汰赛数据绑定答案

【问题标题】：MVC Knockout DatabindMVC 淘汰赛数据绑定
【发布时间】：2013-12-30 07:07:01
【问题描述】：

我还是 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

【问题讨论】：

你试过foreach
你的意思是 foreach: person.PhoneNumbers??我试过这样 -
您看到的是 observable 中的数据还是只是一个序列化对象。在 firebug 中，您应该能够在函数上设置断点，然后使用控制台键入 self.person()[0].Email() 中的内容以查看实际值。如果是这种情况，那么它可能在绑定中。由于您将上下文设置为人员，因此您不需要使用 $data。在您的代码中，您没有列出 ko.applyBindings(PersonViewModel) 但我假设您将其作为 js 文件的一部分正确吗？
我认为这与您正在寻找的内容相似：knockoutjs.com/examples/collections.html
您是否尝试过通过将 foreach 链接到 foreach 来评估它：person()

标签： c# asp.net asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案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/

【讨论】：

【解决方案2】：

查看这个 JS Fiddle，

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() 人，这样就可以解决问题。

【讨论】：