1

私はノックアウトjsにやや困惑しています。私はほとんどのチュートリアルを完了し、その使用方法についての一般的な理解を持っています. 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());

基本的には、3/3より早い時期に外で働くようにしていviewModelました。

私は光を見て、なぜノックアウトがとても良いのかを理解しています.

于 2012-07-06T16:48:27.157 に答える
0

私のノックアウトは少しあいまいですが、これが役立つことを願っています. いつこれをしますか：

return self.tempStyle();

tempStyle を呼び出しています。tempStyle はko.observable("DR.php")であるため、実際に返されるのは ですko.observable("DR.php")()。別名、オブザーバブル自体ではなく、オブザーバブルの値を取得しています。

括弧を削除してみてください：

return self.tempStyle;

そうすれば、radioValue.rv はオブザーバブルの値ではなく、オブザーバブル自体に割り当てられます。

于 2012-07-06T15:42:54.917 に答える