knockout得ajax,在knockout.js中进行ajax检索后,可以观察字段

Jan Fabry..

9

随着该mapping插件淘汰赛,你可以从一个普通的JavaScript对象定义您的视图模型,从一个Ajax调用返回:

var viewModel = ko.mapping.fromJS(data);

// Every time data is received from the server:

ko.mapping.updateFromJS(viewModel, data);

我有一个几乎类似的情况,我的对象是Javascript类的实例.这些类在没有Knockout的情况下定义,我想修改它们以使用observable.

我创建了一个小助手来将常规对象转换为可观察对象.您可以指定可观察字段,也可以在对象(原型)中设置它们.(我想过自动执行此操作,但我无法确定哪个字段可以安全转换,哪个不是.)

(function() {

ko.observableObject = function(object, ko_fields) {

ko_fields = ko_fields || object._ko_fields;

if (!ko_fields) {

return object;

}

for (var f_idx = 0; f_idx < ko_fields.length; f_idx++) {

var field_name = ko_fields[f_idx];

if (object[field_name] && object[field_name].__ko_proto__ !== undefined) {

continue;

}

if (object[field_name] instanceof Array) {

var field_array = object[field_name];

for (var a_idx = 0; a_idx < field_array.length; a_idx++) {

field_array[a_idx] = ko.observableObject(field_array[a_idx]);

}

object[field_name] = ko.observableArray(field_array);

} else {

object[field_name] = ko.observable(object[field_name]);

}

}

return object;

};

})();

您可以将它与类或普通对象一起使用.

// With classes. We define the classes without Knockout-observables

// User.subscriptions is an array of Subscription objects

User = function(id, name) {

this.id = id;

this.name = name;

this.subscriptions = [];

};

Subscription = function(type, comment) {

this.type = type;

this.comment = comment;

});

// Create some objects

var jan = new User(74619, "Jan Fabry");

jan.subscriptions.push(new Subscription("Stack Overflow", "The start"));

jan.subscriptions.push(new Subscription("Wordpress Stack Exchange", "Blog knowledge"));

var chris = new User(16891, "Chris Westbrook");

// We would like to convert fields in our objects to observables

// Either define the fields directly:

ko.observableObject(jan, ['id', 'name', 'subscriptions']);

ko.observableObject(chris, ['id', 'name', 'subscriptions']);

// This will only convert the User objects, not the embedded subscriptions

// (since there is no mapping)

// If you define it in the class prototype, it will work for embedded objects too

User.prototype._ko_fields = ['id', 'name', 'subscriptions'];

Subscription.prototype._ko_fields = ['type', 'comment'];

ko.observableObject(jan);

ko.observableObject(chris);

// It also works with objects that are not created from a class, like your Ajax example

var observable = ko.observableObject({'id': 74619, 'name':'Jan'}, ['id', 'name']);