Question

我正在尝试将List =＆gt; List =＆gt; List =＆gt; List对象绑定到Knockout JS视图模型中。

来自$ getJSON的我的数据如下 Main Object type description

我尝试使用映射插件来创建一个viewmodel，如： - var viewModel = ko.mapping.fromJS（d.organisationsData）;

问题是我不知道为什么（/是否）映射正确发生。

我无法使用data-bind迭代此List和innerList属性

这是我的ViewModel对象

View model object

我尝试使用data-bind迭代：for-each ListOfOrg并且显示Binding错误找不到ListOfOrg。

<ul data-bind="foreach:ListOfOrg">

我是KnockoutJS的新手，所以我想我正在做一些非常愚蠢的事情，如果有，请指出我正确的方向。

Answer 1

好的，让我们通过一个简单的例子来想象我们想在页面上展示一些活动。

假设您返回的数据是所有具有某些属性的活动的枚举，那么您的活动可能如下所示：

var ActivityType = function (data) {
       var self = this;
       self.Id = ko.observable(data.Id);
       self.Name = ko.observable(data.Name);
       self.Description = ko.observable(data.Description);
       self.Selected = ko.observable(data.Selected); };

然后你有一个viewmodel，它有一个名为Activities的属性，需要映射到这个活动Model，所以当你得到你的活动枚举时，它会自动为你在该数组中生成相同数量的New ActivityTypes。

var activitiesViewModel = {};

所以我们为此定义一个映射实用程序（简单地说新的ActivityTypes是具有不同Id的那些，然后创建一个新的）：

var ActivityTypeDataMappingOptions = {
        key: function (data) {
            return data.Id;
        }, create: function (options) {
            return new ActivityType(options.data, null);
        }
    }

所以现在我们需要视图模型上的activities属性：

activitiesViewModel.Activities = mapping.fromJS([]);

这意味着根据映射数据创建一个可观察的数组。

假设您已经定义了一个datacontext，然后在回调函数中为您提供数据：

datacontext.getActivities(function (data) {
    mapping.fromJS(data.Activities, ActivityTypeDataMappingOptions, activitiesViewModel.Activities);
    ko.applyBindings(activitiesViewModel);
});

mapping.fromJS需要3个参数，第一个是将要拥有数据的集合，第二个是我们定义的映射实用程序，因此在包含可观察集合的视图模型上创建新活动并持续该属性。

所以现在你可以使用它：

<ul data-bind="foreach: Activities">
     <li><input type='text' data-bind="value: Name" /></li>
</ul>
<button data-bind="click: updateActivities">Update Activities</button>

注意：在此示例中，视图模型是单例，但您可能希望根据您的使用情况，使用显示的原型模式使其成为可实例化的对象。然后当你调用ko.applyBindings时，你需要传递新的activityViewModel（）作为参数。

现在要更新并发回结果，我们需要定义updateActivities：

activitiesViewModel.updateActivities = function(){
     // Let's say our data context also has a setActivities method that requires a payload of activities object for Post
    datacontext.setActivities({
        // as activitiesViewModel.Activities is an observable array then this will always have the latest values which might have changed in your UI
        activities : ko.toJSON(activitiesViewModel.Activities)
    }, function(data){
     // Lets say the POST will return true if the call was successful
        if (data) alert("all done");
    });
};

你也可以绑定这个函数来改变输入，但是API调用太多了，所以我不推荐它。
如果您正在制作大量这些模型，然后由视图模型使用，您将很快意识到您正在进行大量已在服务器端完成的建模。如果您编写一些自动生成包含该模型的js文件的服务器端代码，例如在我的示例中，您可以使用requireJS将它们导入视图模型文件中，然后在整个应用程序中使用它们。这将允许通过仅更新后端中的模型，在前端自动提供属性名称更改和更新。

使用KnockoutJS自动绑定

1 个答案: