ノックアウトjavascript非表示のコントロール、次の移動

Question

この質問は実際には2つのパターの一種です。最初に、私はかなり複雑なものとして分割したいと思うアプリケーションの一部を持っています。アプリケーションの大半はノックアウトを使用しているので、私はこれを使い続けるべきだと推測しています。何が起こるかは、各ページが移動されるときに設定/データが記録されることです。何かをインストールしたときと似ています。次のページをクリックします。次をクリックします。また、前をクリックして戻る物事を変える。私の質問は、ノックアウトですべてのプロセスをjsonデータとして保存し、ユーザーが終了してsaveにヒットしたら、このデータをすべてデータベースに戻すことです。別の実際のページを使用する必要がありますか？

2番目の質問はもっと尋ねる質問です。誰かが私がこれをどうやって行うことができるかを、js fiddleと言うことができるでしょうか。したがって、もう少し詳しく説明してください： - ページ1 3つの値から選択し、次をクリックしてください - ページ2ドロップダウンボックスから選択し、次をクリックしてください - ページ3日付を選択してテキストボックスに値を入力してください。 - データが入力され、submitがクリックされます 各ページが移動するにつれて、私は必要でない各コントロールを隠すべきだと思います。私は、メインサイトからノックアウトjsの例をいくつかやったことがありますが、それは意味がありますが、私がこの例でどこから始めるべきかは本当にわかりません。

ありがたく受け取ったすべてのヘルプ:)

Answer 1

あなたは計算された観測ページでノックアウト文書で立証されて何かに興味があるかもしれません。オブザーバブルを使用して、現在のページ（たとえば数字）を保存し、「次へ」および「戻る」ボタンでその数字を増減することができます。

各ページは、いくつかの仮想ノックアウト要素の中にコンテンツをラップすることによって、表示および非表示にすることができます。例えば：各ページの

<!--ko if: step() == 0--> 
    <div>First page content...</div> 
<!--/ko--> 
<!--ko if: step() == 1--> 
    <div>Second page content...</div> 
<!--/ko--> 
<!--ko if: step() == 2--> 
    <div>Third page content...</div> 
<!--/ko--> 

、ユーザがナビゲートとしてのviewmodelは人口であるので、種々の観察可能なプロパティにバインドデータであるコントロールを有しています。最後のページまたは完了する準備ができたら、すべての値をデータベースのJSONオブジェクトにプルするだけです。

私は、（非常にきれいではないが）この振る舞いを示すスニペットを含めました。ここで私が使用しています/参照完全なソース：助けをhttp://knockoutjs.com/documentation/computed-pure.html

function AppData() { 
 
    this.firstName = ko.observable('John'); 
 
    this.lastName = ko.observable('Burns'); 
 
    this.prefix = ko.observable('Dr.'); 
 
    this.computedLog = ko.observable('Log: '); 
 
    this.fullName = ko.pureComputed(function() { 
 
     var value = this.prefix() + " " + this.firstName() + " " + this.lastName(); 
 
     // Normally, you should avoid writing to observables within a pure computed 
 
     // observable (avoiding side effects). But this example is meant to demonstrate 
 
     // its internal workings, and writing a log is a good way to do so. 
 
     this.computedLog(this.computedLog.peek() + value + '; '); 
 
     return value; 
 
    }, this); 
 
    
 
    this.step = ko.observable(0); 
 
    this.next = function() { 
 
     this.step(this.step() === 2 ? 0 : this.step()+1); 
 
    }; 
 
}; 
 
ko.applyBindings(new AppData());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<!--ko if: step() == 0--> 
 
    <p>First name: <input data-bind="textInput: firstName" /></p> 
 
<!--/ko--> 
 
<!--ko if: step() == 1--> 
 
    <p>Last name: <input data-bind="textInput: lastName" /></p> 
 
<!--/ko--> 
 
<!--ko if: step() == 2--> 
 
    <div>Prefix: <select data-bind="value: prefix, options: ['Mr.', 'Ms.','Mrs.','Dr.']"></select></div> 
 
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2> 
 
<!--/ko--> 
 
<p><button type="button" data-bind="click: next">Next</button></p> 
 
<div class="log" data-bind="text: computedLog"></div>