KnockoutJs:将数据绑定值传递给JavaScript变量/对象
问题描述:
我对knockoutjs有些困惑。我已阅读了大部分教程,并对如何使用它有了一个大致的了解。我可以很好地操作UI,但是我不明白的是KO如何与KO之外的其他JavaScript函数进行通信。KnockoutJs:将数据绑定值传递给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的其他方面使用它?
答
我离开我的原始问题未经编辑,因为它显示我的错误。
我不能相信这花了我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
早在外面工作。
我现在看到光明,并明白为什么淘汰赛是如此的好。
答
My Knockout有点模糊,但我希望这会有所帮助。你什么时候能这样做:
return self.tempStyle();
它调用tempStyle。 tempStyle是ko.observable("DR.php")
,所以实际返回的结果是ko.observable("DR.php")()
,也就是说,它获取可观察值的值,而不是可观察值本身。
尝试删除括号:
return self.tempStyle;
这样,radioValue.rv将被分配到可观察的本身,而不是观察到的值。
感谢您的回应,但删除了parens并返回'self.tempStyle'会导致错误'错误:无法解析绑定'。 – bmorenate 2012-07-06 15:49:19