1

我对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的其他方面使用它吗？

4

2 回答 2

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早期工作之外。

我现在看到了曙光，明白了为什么淘汰赛这么好。

于 2012-07-06T16:48:27.157 回答
0

我的淘汰赛有点模糊，但我希望这会有所帮助。你什么时候这样做：

return self.tempStyle();

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

尝试删除括号：

return self.tempStyle;

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

于 2012-07-06T15:42:54.917 回答