Question

我正在尝试根据选择的结果制作一个可以使用不同URL点击的按钮。目前，我的代码显示的所有链接都发送到http://example.com。我想根据用户选择的选项进行此更改。

HTML

    <div class="wrapper">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 text-right">
            <button class="btn btn-default btn-corner" type="submit" data-bind="click: startOver, visible: queryData().id > 0">Start over</button>
          </div>
        </div>
      </div>

      <div class="container main">
        <div class="row">
          <div class="c12 text-center">
            <h1 data-bind="text: queryData().text"></h1>
            <h3 data-bind="text: queryData().subhead"></h3>
            <h3><a data-bind="text: queryData().link, attr: {href: url}"></a></h3>
            <div class="option-group" data-bind="foreach: queryData().answers">
              <button class="btn btn-default btn-lg" type="submit" data-bind="click: $parent.goToTarget, text: text"></button>
            </div>
            <button class="btn btn-default" type="submit" data-bind="click: stepBack, visible: navHistory().length > 1">Previous Step</button>
                                <button class="btn btn-default" type="submit" data-bind="click: buyBook, visible: navHistory().length > 1">Buy the book</button> 
                 </div>
        </div>
      </div>
      <div class="push"></div>
    </div>


    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
    <script src="app.js?v=0.4.0"></script>

    <script>

    </script>
  </body>
</html>

Javascript如下：

var queries = [{  
id: 0,
text: "Start?",
answers: [{
text: "Let's Start!",
target: 1
}]
}, {
id: 1,
text: "Which sectiondo you want",
  answers: [{
     text: "Foo",
     target: 2
    }, {
      text: "Bar",
      target: 3
    }, {
      text: "Foobar",
      target: 4
    }]
  }, {
   id: 2,
   text: "Selection1",
    link: "test2.com",
   answers: []
}];




function QueryViewModel() {
  var self = this; 

  self.url = ko.observable("https://example.com");
  self.querySet = ko.observable();
  self.currentStep = ko.observable();
  self.queryData = ko.observable();
  self.sfw = ko.observable();
  self.navHistory = ko.observableArray();

  // Operations
  self.goToTarget = function(obj) {
  self.navHistory.push(self.currentStep());
  self.currentStep(obj.target);
  self.queryData(self.querySet()[obj.target]);
}

  self.startOver = function() {
    self.navHistory.removeAll();
    self.goToTarget({target: 0});
  }

  self.stepBack = function() {
    var lastStep = self.navHistory().length > 1 ? self.navHistory.pop() : 0;
    self.currentStep(lastStep);
    self.queryData(self.querySet()[lastStep]);
  }

  this.buyBook = function() {
    window.open("https://www.google.com", "_blank");
  }

  var paramsString = document.location.hash.substring(1);
  var params = new Array();
  if (paramsString) {
  var paramValues = paramsString.split("&");
  for (var i = 0; i < paramValues.length; i++) {
  var paramValue = paramValues[i].split("=");
  params[paramValue[0]] = paramValue[1];
}
   }

  params ? paramTarget = params['target'] : params = [];


  self.sfw() ? self.querySet(queriesSFW) : self.querySet(queries);
  if (paramTarget) {
    self.navHistory.push(0);
    self.currentStep(0);
    self.goToTarget({target: paramTarget})
  } else {
    self.goToTarget({target: 0});
  }
}


ko.applyBindings(new QueryViewModel());

目前link2.com重定向到example.com我想用link2属性中的条目替换URL，所以在这种情况下test2.com但是对于其他情况，它会显示链接和使用的字符串这一点。

如何在Knockout中创建动态链接。

0 个答案: