JQuery Knockout -分配json数据以选择选项
JQuery Knockout -分配json数据以选择选项
提问于 2014-07-25 16:23:15
我有一个简单的选择下拉列表，我想从json数据中填充。当我将json数据硬编码为嵌入式javascript时，它可以工作，但是当我尝试使用JQuery的getJSON回调检索数据时，它不会填充select。我已经检查了web url是否正常工作，并返回了正确的json结果，我相信我没有按正确的顺序调用它。
我尝试过搜索，很多人给出了我尝试过的例子，例如将json结果分配给全局变量。
以下HTML：
<select data-bind="options: options, optionsText: 'name', optionsValue: 'name'"></select>JS (与嵌入式jsondata一起工作)如下：
var jsdata = [{"id":1,"name":"Fruits","products":[{"id":1,"name":"Banana","price":0.99,"catid":1},{"id":2,"name":"Apple","price":0.49,"catid":1},{"id":3,"name":"Orange","price":0.69,"catid":1}]},{"id":2,"name":"Beverage","products":[{"id":4,"name":"Coca Cola","price":1.99,"catid":2},{"id":5,"name":"Dr. Pepper","price":1.89,"catid":2},{"id":6,"name":"Sprite","price":1.79,"catid":2},{"id":7,"name":"Mountain Dew","price":1.69,"catid":2},{"id":8,"name":"7-Up","price":1.59,"catid":2}]},
{"id":3,"name":"test","products":[]}];
var ViewModel = function (js) {
var self = this;
self.json = js;
self.options = ko.toJS(js);
}
var vm = new ViewModel(jsdata);
ko.applyBindings(vm);jsfiddler是@ http://jsfiddle.net/psteele/7vcqX/#
试着使用getJSON，但没有起作用：
$.getJSON("url-to-data", null, function(data) {
var ViewModel = function (js) {
var self = this;
self.json = js;
self.options = ko.toJS(js);
}
var vm = new ViewModel(data);
ko.applyBindings(vm);
});也曾尝试过：
var globaljson;
$.getJSON("url-to-data", null, function(data) {
globaljson = data;
});
var ViewModel = function (js) {
var self = this;
self.json = js;
self.options = ko.toJS(js);
}
var vm = new ViewModel(globaljson);
ko.applyBindings(vm);回答 2
Stack Overflow用户
回答已采纳
发布于 2014-07-25 19:28:13
您应该使用一些不同的代码来创建可观察的数组：
$.getJSON('your url', function(data) {
var ViewModel = function(js) {
var self = this;
self.json = js;
self.options = ko.observableArray($.map(js, function(item) { return { name: item.name, value: item.id } }));
};
var vm = new ViewModel(data);
ko.applyBindings(vm);
});演示。
Stack Overflow用户
发布于 2014-07-25 16:47:39
根据敲除文件，您应该使用数组作为select的选项。所以，试一试如下：
jQuery.getJSON(url, function(data) {
var ViewModel = function (options) {
var self = this;
self.options = ko.observableArray($.map(options, function(key, value) { return { name: value, value: key } }));
}
var vm = new ViewModel(data);
ko.applyBindings(vm);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24960242
复制相关文章
相似问题
腾讯云开发者
