Knockout.js 使每个嵌套对象都成为 Observable

Question

我使用 Knockout.js 作为 MVVM 库来将我的数据绑定到某些页面。我目前正在构建一个库来对 Web 服务进行 REST 调用。 我的 RESTful Web 服务返回一个简单的结构：

{
    id : 1,
    details: {
        name: "Johnny",
        surname: "Boy"
    }
}

我有一个可观察的主要父母，myObject。 当我这样做时

myObject(ko.mapping.fromJS(data))

myObject 中的 observables 是：

• id
• name
• surname

我怎样才能使details（理论上结构中的任何对象都是可观察的）？我需要这种行为，以便我可以在细节上设置一个计算出的 observable，并在任何内部数据发生变化时立即引起注意。

我已经设置了一个基本的递归函数，它应该可以解决问题。当然，myObject.details 不会变成 observable。

// Makes every object in the tree an observable.
var makeAllObservables = function () {
    makeChildrenObservables(myObject);
};
var makeChildrenObservables = function (object) {
    // Make the parent an observable if it's not already
    if (!ko.isObservable(object)) {
        if ($.isArray(object))
            object = ko.observableArray(object);
        else
            object = ko.observable(object);
    }
    // Loop through its children
    for (var child in object()) {
        makeChildrenObservables(object()[child]);
    }
};

我很确定这与不正确的引用有关，但我该如何解决这个问题？谢谢。

Answer 1

我会使用knockout mapping plugin。

var jsonData = {
    id : 1,
    details: {
        name: "Johnny",
        surname: "Boy"
    }
}

var yourMapping = {
    'details': {
        create: function(options) {
            return Details(options.data);
        }
    }
}

function Details(data) {
    ko.mapping.fromJS(data, {}, this);
}

function YourObjectName() {
    ko.mapping.fromJS(jsonData, yourMapping, this);
}

这将创建您的对象层次结构，其中所有子对象都作为可观察对象。

Answer 2

我认为 knockout 没有内置的方法来观察子元素的变化。如果我理解您的问题，当有人更改名称时，您希望更改详细信息作为一个实体来引起注意。你能举一个具体的例子来说明你将如何使用它吗？你会使用订阅可观察到的细节来执行某些操作吗？

您的代码没有将详细信息设为可观察的原因是因为 javascript 是按值传递的，因此更改函数中 'object' 参数的值不会更改您传递的实际值，只会更改函数内部的参数。

编辑

如果更改将自动传播给父母，我认为这应该使所有孩子都可以观察到，但是你第一次通过的根应该已经是一个可观察的。

// object should already be observable
var makeChildrenObservables = function (object) {
    if(!ko.isObservable(object)) return;

    // Loop through its children
    for (var child in object()) {
        if (!ko.isObservable(object()[child])) {
            object()[child] = ko.observable(object()[child]);
        }
        makeChildrenObservables(object()[child]);
    }
};

Answer 3

根据我的经验，ko.mapping.fromJS 不会从对象中生成可观察对象。

假设你有这个 ViewModel 构造函数：

var VM = function(payload) {
  ko.mapping.fromJS(payload, {}, this);
}

还有这个数据对象：

var data1 = {
  name: 'Bob',
  class: {
    name: 'CompSci 101',
    room: 112
  }

}

然后你使用 data1 创建 VM1：

var VM1 = new VM(data1);

那么 VM1.class 将不是一个 ko.observable，它是一个普通的 javascript 对象。

如果您随后使用具有空类成员的数据对象创建另一个视图模型，即：

var data2 = {
  name: 'Bob',
  class: null
}
var VM2 = new VM(data2);

那么 VM2.class 是一个 ko.observable。

如果你接着执行：

ko.mapping(data1, {}, VM2)

那么 VM2.class 仍然是一个 ko.observable。

因此，如果您从对象成员为 null 的种子数据对象创建 ViewModel，然后使用填充的数据对象填充它们，您将拥有可观察的类成员。

这会导致问题，因为有时对象成员是可观察的，有时则不是。表单绑定将适用于 VM1，但不适用于 VM2。如果 ko.mapping.fromJS 总是让所有东西都成为 ko.observable 从而保持一致就好了？

Answer 4

通过使用Knockout-Plugin，我们可以使子元素可观察。我们有很多选项来管理我们希望数据如何可观察。

这是一个示例代码：

var data = {
    people: [
        {
            id: 1,
            age: 25,
            child : [
                {id : 1,childname : "Alice"},
                {id : 2,childname : "Wonderland"}
            ]
        }, 
        {id: 2, age: 35}
    ],
    Address:[
        {
            AddressID : 1,
            City : "NewYork",
            cities : [
                {
                    cityId : 1,
                    cityName : "NewYork"
                },
                {
                    cityId :2,
                    cityName : "California"
                }
            ]
        },
        {
            AddressID : 2,
            City : "California",
            cities : [
                {
                    cityId :1,
                    cityName : "NewYork"
                },
                {
                    cityId :2,
                    cityName : "California"
                }
            ]
        }
    ],
    isSelected : true,
    dataID : 6
};
var mappingOptions = {
    people: {
        create: function(options) {
            console.log(options);
            return ko.mapping.fromJS(options.data, childmappingOptions);
        }
    },
    Address: {
        create: function(options) {
            console.log(options);
            return ko.mapping.fromJS(options.data, childmappingOptions);
        }
    }
};
var childmappingOptions = {
    child: {
        create: function(options) {
            return ko.mapping.fromJS(options.data, { observe: ["id","childname"]});
        }
    },
    cities :{
        create: function(options) {
            return ko.mapping.fromJS(options.data, { observe: ["cityId","cityName"]});
        }
    }
};
var r = ko.mapping.fromJS(data, mappingOptions);

我附上了一个工作小提琴：http://jsfiddle.net/wmqTx/5/

Answer 5

我将用我的示例解决方案扩展 Paolo del Mundo 的答案（我认为它可能很容易成为目前最好和唯一的解决方案）。

考虑 frapontillo 的原始对象：

{
    id : 1,
    details: {
        name: "Johnny",
        surname: "Boy"
    }
}

details 属性本身是一个对象，因此不能是可观察的。下面示例中的User 属性也是如此，它也是一个对象。这两个对象不能是 observables但它们的 LEAF 属性可以是。

数据树/模型的每个叶属性都可以是可观察的。实现这一点的最简单方法是在将映射模型传递给映射插件之前正确定义它 strong> 作为参数。

请参阅下面的示例。

示例：

假设我们需要显示一个 html 页面/视图，其中我们有一个网格上的用户列表。在“用户”网格旁边显示了一个用于从网格中编辑选定用户的表单。

第 1 步：定义模型

function UsersEdit() {
    this.User = new User();                    // model for the selected user      
    this.ShowUsersGrid = ko.observable(false); // defines the grid's visibility (false by default)
    this.ShowEditForm = ko.observable(false);  // defines the selected user form's visibility (false by default)      
    this.AllGroups = [];                       // NOT AN OBSERVABLE - when editing a user in the user's form beside the grid a multiselect of all available GROUPS is shown (to place the user in one or multiple groups)
    this.AllRoles = [];                        // NOT AN OBSERVABLE - when editing a user in the user's form beside the grid a multiselect of all available ROLES is shown (to assign the user one or multiple roles)
}

function User() {
    this.Id = ko.observable();
    this.Name = ko.observable();
    this.Surname = ko.observable();
    this.Username = ko.observable();
    this.GroupIds = ko.observableArray(); // the ids of the GROUPS that this user belongs to
    this.RoleIds = ko.observableArray();  // the ids of the ROLES that this user has
}

第 2 步：映射（获取嵌套的 OBSERVABLE）

假设这是您的原始 JSON 模型，其中包含您想要映射的数据并获得具有嵌套 observable 的 KO 模型。

var model = {
    User: {
        Id: 1,
        Name: "Johnny",            
        Surname = "Boy",
        Username = "JohhnyBoy",
        GroupIds = [1, 3, 4],
        RoleIds = [1, 2, 5]
    }
};

现在所有这些都已定义，您可以映射：

var observableUserEditModel = ko.mapping.fromJS(model, new UsersEdit());

你已经完成了！ :)

observableUserEditModel 将保存所有的 observable，甚至是嵌套的。现在，为了测试这一点，您唯一需要注意的是将 observableUserEditModel 对象与您的 HTML 绑定。提示：使用 with 绑定并测试可观察的 observableUserEditModel 数据结构，将其插入 HTML 视图：

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Answer 6

也许在未来的版本中可能会有一个配置选项导致 ko.mapping.fromJS 始终创建 observables。它可以在新项目或更新现有项目的绑定后启用。

我为防止此问题所做的工作是确保模型种子始终在每个级别都填充 Objects 成员属性。通过这种方式，所有对象属性都映射为 POJO（Plain Old Javascript Objects），因此 ViewModel 不会将它们初始化为 ko.observables。它避免了“有时可观察，有时不可观察”的问题。

最好的问候， 迈克