knockout javascript隱藏控件，移動下一個

Question

這個問題確實是一種雙親。首先，我有一個應用程序的一部分，我認爲它需要分解成部分，因爲它非常複雜。大多數應用程序使用淘汰賽，所以我假設我應該繼續使用這個。會發生什麼情況是設置/數據將在每個頁面被移動通過時記錄，類似於當你安裝某些東西時，你點擊下一個頁面顯示你再次點擊下一個等等。你還可以點擊上一個，然後返回改變事情。我的問題是，將所有這個過程作爲json數據存儲在knockout中是否正確，然後在用戶最後點擊保存時將所有這些數據發回數據庫，還是應該使用單獨的實際頁面？

第二個問題更多的是一個乞討問題，任何人都可以證明我可以做到這一點，用js小提琴說。所以要詳細說明一下： - 第1頁選擇三個值，點擊下一步 - 第2頁選擇下拉框，點擊下一步 - 第3頁選擇日期並在文本框中輸入值，點擊下一步 - 第4頁用戶檢查所有數據輸入並點擊提交 隨着每個頁面移動我猜我應該隱藏每個不需要的控件。我已經完成了一些來自主站點的knockout js示例，它有點合理，但我不確定我應該從這個示例開始。

任何幫助感激地接受:)

Answer 1

您可能感興趣的東西，證明計算觀測頁面上的淘汰賽文檔。您可以使用observable來存儲當前頁面，例如一個數字，然後使用'next'和'back'按鈕來增加或減少該數字。

每個頁面都可以通過將內容包裝到一些虛擬挖空元素中來顯示和隱藏。例如：

<!--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--> 

在每一頁具有被數據綁定到各種可觀察到的性質，因此視圖模型填充作爲用戶導航通過控件。在最後一頁，或準備完成時，只需將所有值都拉入數據庫的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>