Question

我正在制作一个小应用程序，要求用户位置存储，直到单击单选按钮，然后调用google maps api列出附近已选中单选按钮的位置。

到目前为止，我有一个全局对象var food = { mexican: "mexican food", pizza: "italian food", coffee: { venue: "cafe", keyword: "coffee" } };

帮助我传递给api调用中的全局变量var queryL;。

var viewModel = function() {
  food: ko.observable

现在我做到了这一点，需要一些帮助来找出三个单选按钮并更改值。

伪代码中的

类似于：

    if (mexican is checked) {  
     queryL = food.mexican;
     initmap();
} else if (pizza is checked) {
     queryL = food.pizza;
     initmap();
} else if (coffee is checked) {
     queryL = food.coffee.keyword;
     typeL = food.coffee.venue;
     initmap();
}

我将如何做到这一点？

<label class="radio-inline"><input type="radio" name="optradio" value="mexican" data-bind="checked: typeOfFood">Tacos</input></label>
<label class="radio-inline"><input type="radio" name="optradio" value="pizza" data-bind="checked: typeOfFood">Pizza</input></label>
<label class="radio-inline"><input type="radio" name="optradio" value="coffee" data-bind="checked: typeOfFood">Coffee</input></label>

单选按钮^^

感谢您的帮助！

Answer 1

您可以订阅typeOfFood observable并将您的逻辑置于订阅回调函数中。

以下是一个示例：https://jsfiddle.net/kyr6w2x3/98/

var viewModel = function (){
 var self = this;
 self.food = ko.observable(food);
 self.queryL = ko.observable('');
 self.typeL  = ko.observable('');
 self.typeOfFood = ko.observable();

 self.typeOfFood.subscribe(function(newValue){
    switch(newValue){
      case "mexican":
      //do your stuff here
      self.queryL(self.food().mexican);
      self.initMap();
      break;
    case "pizza":
      //do your stuff here
      self.queryL(self.food().pizza);
      self.initMap();
      break;
    case "coffee":
      //do your stuff here
      self.queryL(self.food().coffee.keyword);
      self.typeL(self.food().coffee.venue);
      self.initMap();
      break;
    }
  })

 self.initMap = function(){
   // your initMap Function here
   console.log("inside initMap function");
   console.log("queryL: " , self.queryL());
   console.log("typeL: " , self.typeL());
 }
}
ko.applyBindings(viewModel);

Knockout JS和可观察的单选按钮

1 个答案: