在knockout.js中进行ajax检索后使字段可见
在knockout.js中进行ajax检索后使字段可见
提问于 2010-12-02 01:16:46
我想知道如何才能使通过ajax调用获得的某些字段在knockout.js中可见，而不必在视图模型中定义整个对象。这个是可能的吗？这是我到目前为止所知道的：
var viewModel = {
lines: new ko.observableArray([])
};
function refreshList(ionum) {
var data = {};
data['IONum'] = ionum;
$.ajax({
url: 'handlers/getlines.ashx',
data: data,
cache: false,
dataType: 'json',
success: function(msg) {
viewModel.lines(msg);
//here is where I am attempting to make the email address field observable
/*for (var i = 0; i < msg.length; i++) {
viewModel.lines()[i].emailAddress = new ko.observable(msg[i].emailAddress);
}*/
//alert(viewModel.lines[0].emailAddress);
//ko.applyBindings(viewModel);
}
});
}回答 3
Stack Overflow用户
发布于 2011-08-22 20:43:15
使用the mapping plugin for Knockout，您可以从一个普通的Javascript对象定义视图模型，就像从Ajax调用中返回的那样：
var viewModel = ko.mapping.fromJS(data);
// Every time data is received from the server:
ko.mapping.updateFromJS(viewModel, data);我遇到过几乎类似的情况，我的对象是Javascript类的实例。这些类在定义时没有考虑到Knockout，我想将它们修改为使用可观察性。
我创建了一个小帮助器来将常规对象转换为可观察对象。您可以指定可观察的字段，也可以在对象(原型)中设置它们。(我想自动执行此操作，但我无法确定哪个字段可以安全转换，哪个字段不安全。)
(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']);Stack Overflow用户
发布于 2010-12-03 23:33:16
我修复了这个问题，发现在将对象设置为我的视图之前，最好在对象上声明可观察字段，如下所示
for (var i=0;i<msg.lenth;i++){
msg[i].emailAddress=ko.observable(msg[i].emailAddress);
}
viewModel.lines(msg);Stack Overflow用户
发布于 2011-03-21 09:16:33
下面是我的CoffeeScript RequireJS module，用于将我所说的“视图数据”(服务器派生的JSON值)转换为KO ViewModels：
define "infrastructure/viewModels", [], (viewModels) ->
exports = {}
isDate = (x) ->
typeof x is "string" and
x.startsWith "/Date("
deserializeDate = (dateString) ->
new Date(parseInt(dateString.substr(6)))
isScalar = (x) ->
x is null or
typeof x is "string" or
typeof x is "number" or
typeof x is "boolean"
exports.fromViewData = (viewData) ->
if isDate viewData
return ko.observable deserializeDate viewData
if isScalar viewData
return ko.observable viewData
viewModel = {}
for own key, value of viewData
if key is "id" then continue
viewModel[key] =
if Array.isArray value
ko.observableArray (exports.fromViewData el for el in value)
else
exports.fromViewData value
return viewModel
return exports示例用法：
require ["infrastructure/viewModels"], (viewModels) ->
$.getJSON "/url/to/data", (viewData) ->
viewModel = viewModels.fromViewData viewData
ko.applyBindings viewModel当然，如果你不做CoffeeScript，你可以通过点击链接站点上的“尝试CoffeeScript”来翻译成JavaScript。如果您不使用RequireJS，那么只需从我的模块中获取相关函数，而不是将它们包装在define中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4327034
复制相关文章
相似问题