title: KnockoutJs: Pass data-bind values to javascript variable/object
body: <p>I’m somewhat baffled by knockoutjs.  I’ve gone through most of the tutorials and have a general understanding of how to use it.  I can manipulate the UI just fine, but what I can’t understand is how KO communicates with other javascript functions outside of KO.</p>
  
  <p>I think my goal is rather simple and straightforward.  I need the value of the radio button that a user selected from a family of radio buttons.  Here’s what I have.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="radio" name="templateStyle" value="DR.php" data-bind="checked: tempStyle"&gt;
  &lt;input type="radio" name="templateStyle" value="DRH.php" data-bind="checked: tempStyle"&gt;
  &lt;input type="radio" name="templateStyle" value="PS.php" data-bind="checked: tempStyle"&gt;
  
  &lt;p&gt;The template style selected is &lt;span data-bind="text: selectedStyle"&gt;&lt;/span&gt;&lt;/p&gt;
  
  &lt;button id="submitTemplate"&gt;Submit Template&lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var radioValue = { rv: "" };
  
  function viewModel() {
      var self = this;
  
      self.tempStyle = ko.observable("DR.php");
      self.selectedStyle = ko.computed(function() {
              return self.tempStyle();
      },
          self
      );
  
      return self.selectedStyle();
  }
  ko.applyBindings(new viewModel());
  
  $("#submitTemplate").click(function() {
      radioValue.rv = viewModel();
  
      console.log(radioValue.rv); 
  });
  </code></pre>
  
  <p>This works fine on the UI side, but the <code>radioValue.rv</code> object just remains at “DR.php.”  How do I update this to reflect the <code>data-bind="text: selectedStyle"</code> value?</p>
  
  <p>I’ve tried variations of <code>radioValue.rv = ko.toJS(viewModel())</code> but this did not work.</p>
  
  <p>If this is completely wrong, how do I get the value of the templateStyle radio buttons?  So I can use it in other aspects of my javascript?</p>