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將被分配到可觀察的本身，而不是觀察到的值。