[英]knockoutjs: custom data-bind 'with' to pass function by reference
[英]KnockoutJs: Pass data-bind values to javascript variable/object
我有點被淘汰賽弄糊塗了。 我已經閱讀了大多數教程,並對如何使用它有一個大致的了解。 我可以很好地操作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的其他方面使用它嗎?
我保留了原來的問題,因為它顯示了我的錯誤。
我不敢相信我花了兩天時間和一個特別的問題來解決這個問題,但是這確實是。
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
之外工作。
現在,我看到了燈光,明白了為什么淘汰賽這么好。
我的淘汰賽有點模糊,但我希望這會有所幫助。 您什么時候這樣做:
return self.tempStyle();
它正在調用tempStyle。 tempStyle是ko.observable("DR.php")
,因此實際返回的是ko.observable("DR.php")()
,也就是獲取可觀察值的值,而不是可觀察值本身。
嘗試刪除括號:
return self.tempStyle;
這樣,radioValue.rv將被分配給可觀察對象本身,而不是可觀察對象的值。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.