私はbackbone.jsを初めて使用していて、問題を回避するためにいくつかの問題を抱えています。「ウィザード」タイプのプロセス(a.k.a.複数ステップフォーム)を設計しています。このウィザードは、質問に対するユーザーの応答に応じて異なる画面分岐ロジックを処理し、ユーザーが進むにつれて各画面に応答を格納し、最後にすべてのフォーム応答(すべての手順)を1つのラージオブジェクトにシリアル化できるようにする必要があります(おそらくJSON)。ウィザードの質問は毎年変わります。同時に複数の同様のウィザードをサポートする必要があります。backbone.jsでウィザードプロセスを作成
私は、スクリーンを作成する(バックボーンフォームを使用する)まで基本的な考え方を持っていますが、今私はユーザーの入力を保存したいと思っています。それをやる。私が見た例のほとんどは、特定のタイプのオブジェクト(例えばTodo
)を持っていて、それらのコレクションを作成するだけです(例えばTodoList
)。しかし、異なるタイプのため、Backbone.Modelの定義が混在しています。それはとても単純ではないようです。どのように私はウィザードとその含まれている画面をインスタンス化し、ユーザーの応答を記録する必要があります上の任意のポインター?
もし私が私のビューコードでjsfiddleを投稿することができれば、これまでのところ、前方と後方の画面(ユーザーの入力レスポンスの記録や画面の分岐なし)のみが表示されます。
var Wizard = Backbone.Model.extend({
initialize: function(options) {
this.set({
pathTaken: [0]
});
},
currentScreenID: function() {
return _(this.get('pathTaken')).last();
},
currentScreen: function() {
return this.screens[this.currentScreenID()];
},
isFirstScreen: function(screen) {
return (_(this.screens).first() == this.currentScreen());
},
// This function should be overridden by wizards that have
// multiple possible "finish" screens (depending on path taken)
isLastScreen: function(screen) {
return (_(this.screens).last() == this.currentScreen());
},
// This function should be overridden by non-trivial wizards
// for complex path handling logic
nextScreen: function() {
// return immediately if on final screen
if (this.isLastScreen(this.currentScreen())) return;
// otherwise return the next screen in the list
this.get('pathTaken').push(this.currentScreenID() + 1);
return this.currentScreen();
},
prevScreen: function() {
// return immediately if on first screen
if (this.isFirstScreen(this.currentScreen())) return;
// otherwise return the previous screen in the list
prevScreenID = _(_(this.get('pathTaken')).pop()).last();
return this.screens[prevScreenID];
}
});
var ChocolateWizard = Wizard.extend({
nextScreen: function() {
//TODO: Implement this (calls super for now)
// Should go from screen 0 to 1 OR 2, depending on user response
return Wizard.prototype.nextScreen.call(this);
},
screens: [
// 0
Backbone.Model.extend({
title : "Chocolate quiz",
schema: {
name: 'Text',
likesChocolate: {
title: 'Do you like chocolate?',
type: 'Radio',
options: ['Yes', 'No']
}
}
}),
// 1
Backbone.Model.extend({
title : "I'm glad you like chocolate!",
schema: {
chocolateTypePreference: {
title: 'Which type do you prefer?',
type: 'Radio',
options: [ 'Milk chocolate', 'Dark chocolate' ]
}
}
}),
//2
Backbone.Model.extend({
title : "So you don't like chocolate.",
schema: {
otherSweet: {
title: 'What type of sweet do you prefer then?',
type: 'Text'
}
}
})
]
});
wizard = new ChocolateWizard();
// I'd like to do something like wizard.screens.fetch here to get
// any saved responses, but wizard.screens is an array of model
// *definitions*, and I need to be working with *instances* in
// order to fetch
編集:
wizardResponse = {
userID: 1,
wizardType: "Chocolate",
screenResponses: [
{ likesChocolate: "No"},
{},
{ otherSweet: "Vanilla ice cream" }
]
}
こんにちは。フェッチしたいものを説明できますか?応答はどのように見えますか?多分あなたは例を挙げることができますか? Btw、非常に良い質問。 – theotheo
こんにちは、フェッチは、ウィザードの質問へのユーザーの以前に保存された応答を取得するためのものです(つまり、私はモデルのために働くセーブメソッドを持っている必要があります)。私はあなたに応答がどのように見えるかの例を挙げたいと思いますが、私はちょうどあなたにそれを与えるためにこのアプリを構築する方法を考えているように思えません。私はより大きな脳が必要です! –
@ user1248256あなたの質問に感謝します。これについてもう少し考えてみましたが、最終的には保存されたウィザードのクエリがJSON(約)に戻るようにするために質問を編集しました。おそらく、私は新しいモデルを作成したり、バックボーンの同期やパース方法の一部を修正しなければならないでしょうか? –