淘汰赛JS和可观察的单选按钮

Quesofat

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

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

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

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>

单选按钮^^

感谢您的帮助！

马廷·卡贾巴迪（Matin Kajabadi）

您可以订阅您的typeOfFood可观察对象，并在订阅回调函数中包含您的逻辑。

这是一个例子：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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。