我有一个下拉菜单,允许用户选择某个月。可观察的数组根据用户选择更改我的传单地图的图层(完美地工作)。
现在我需要为另一个用内容填充弹出窗口的函数选择值myMonth
(基于零的月号)。我只是找不到在myMonth
函数之外使用变量viewModel
的工作解决方案......非常感谢任何帮助!
以下是我的代码:popupcontent = "Selected month: undefined"
var myMonth; //global variable myMonth
//oberservable array
function viewModel() {
this.choices = ko.observableArray([
"January","February","March","April","May","June",
"July","August","September","October","November","December"]);
this.selectedChoice = ko.observable();
this.selectedChoice.subscribe(function(newValue) {
myMonth = this.choices.indexOf(this.selectedChoice());
myLayerGroup.clearLayers();
myLayerGroup.addLayer(myLayers[myMonth]);
console.log(myMonth); //works!
return myMonth; // no effect?!
},this);
};
ko.applyBindings(new viewModel());
// popUp window content
function onEachFeature(feature, layer) {
if (feature.properties) {
var popupContent = "Selected month: "+ myMonth;
layer.bindPopup(popupContent);
}
};
答案 0 :(得分:1)
我在代码中看到的唯一问题是声明
return myMonth; // no effect?!
绝对没有效果,因为它在.subscribe函数中没有任何意义。没有地方可以将值返回到。
这是fiddle,显示您的代码几乎正常工作,所以我不清楚您遇到的实际问题。有错误信息吗?你怎么称呼onEachFeature
?
编辑1: 随着你的更新小提琴,我现在可以看到问题是你的popupContent在一开始就设置了一次,之后再也没有更新过。 geoJSON函数会立即调用您的onEachFeature函数来获取所选图层的内容,该内容在此时未定义,并将其永久存储为其内容。
popupContent似乎也期望一个扁平的字符串,所以可能没有办法让它以敲除绑定的方式动态更新。我想你必须通过再次调用geoJSON来重新创建数据层。
这是一个更新的小提琴,我将geoJSON调用移动到createLayer函数中,以便订阅调用它来重建图层:
this.selectedChoice.subscribe(function(newValue) {
myMonth = this.choices.indexOf(this.selectedChoice());
myLayerGroup.clearLayers();
myLayerGroup.addLayer(createLayer(myLayers[myMonth]));
}, this);
答案 1 :(得分:0)
您所谓的全局变量实际上是窗口对象的属性(例如,请参阅this SO post)。
此评论:
// popUp window content
function onEachFeature(feature, layer) {
if (feature.properties) {
var popupContent = "Selected month: "+ myMonth;
layer.bindPopup(popupContent);
}
};
让我觉得您正在尝试从子窗口中访问父窗口中定义的变量myMonth
,这是不可能的。
您可以使用window.opener.myMonth
语法访问变量,如this doc中所述。
// popUp window content
function onEachFeature(feature, layer) {
if (feature.properties && window.opener) {
var popupContent = "Selected month: "+ window.opener.myMonth;
layer.bindPopup(popupContent);
}
};