KnockoutJs：将数据绑定值传递给JavaScript变量/对象

Question

我对knockoutjs有些困惑。我已阅读了大部分教程，并对如何使用它有了一个大致的了解。我可以很好地操作UI，但是我不明白的是KO如何与KO之外的其他JavaScript函数进行通信。

我认为我的目标相当简单直接。我需要用户从一系列单选按钮中选择的单选按钮的值。这是我的。

HTML

<input type="radio" name="templateStyle" value="DR.php" data-bind="checked: tempStyle"> 
<input type="radio" name="templateStyle" value="DRH.php" data-bind="checked: tempStyle"> 
<input type="radio" name="templateStyle" value="PS.php" data-bind="checked: tempStyle"> 

<p>The template style selected is <span data-bind="text: selectedStyle"></span></p> 

<button id="submitTemplate">Submit Template</button> 

JS

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); 
}); 

也能正常工作在UI端，但radioValue.rv对象只是停留在“DR.php。”如何更新这反映data-bind="text: selectedStyle"值？

我试过了radioValue.rv = ko.toJS(viewModel())的变体，但是这没有奏效。

如果这是完全错误的，我如何获得templateStyle单选按钮的值？所以我可以在我的JavaScript的其他方面使用它？

Answer 1

我离开我的原始问题未经编辑，因为它显示我的错误。

我不能相信这花了我2天的时间和一个SO问题来解决这个问题，但在这里。

HTML

<input type="radio" name="templateStyle" value="DR.php" data-bind="checked: tempStyle"> 
<input type="radio" name="templateStyle" value="DRH.php" data-bind="checked: tempStyle"> 
<input type="radio" name="templateStyle" value="PS.php" data-bind="checked: tempStyle"> 

<p>The template style selected is <span data-bind="text: selectedStyle"></span></p> 

<button id="submitTemplate" data-bind="click: submitTemplate">Submit Template</button> 

JS

var radioValue = { rv: "" }; 

function viewModel() { 
    var self = this; 

    self.tempStyle = ko.observable("DR.php"); // Set default selected radio button 

    self.selectedStyle = ko.computed(function() { 
      return self.tempStyle(); // Update viewModel to reflect user input 
     }, 
     self 
    ); 

    self.submitTemplate = function() { 
     radioValue.rv = self.tempStyle(); // Return user input on button click 

     console.log(radioValue.rv); // JS object can now be used anywhere 
    }; 

} 
ko.applyBindings(new viewModel()); 

基本上，我试图在viewModel早在外面工作。

我现在看到光明，并明白为什么淘汰赛是如此的好。

Answer 2

My Knockout有点模糊，但我希望这会有所帮助。你什么时候能这样做：

return self.tempStyle(); 

它调用tempStyle。 tempStyle是ko.observable("DR.php")，所以实际返回的结果是ko.observable("DR.php")()，也就是说，它获取可观察值的值，而不是可观察值本身。

尝试删除括号：

return self.tempStyle; 

这样，radioValue.rv将被分配到可观察的本身，而不是观察到的值。