0
jQueryとRactiveJSテンプレートのスタンドアロンウィジェットの開発中です。最初に、動的入力フォーム要素でウィジェットが開かれ、これらの要素にAJAX呼び出しが設定されます。ここで電子メールは静的フィールドです。これはユーザーの初期ビューです。ユーザーがウィジェット内のボタンをクリックすると、フォームが検証され、検証済みのデータを含む別のAJAX-POST呼び出しが送信され、ウィジェットテンプレート自体のdivでリクエストの応答が表示されます。 POST呼び出しが失敗した場合、何らかのエラーメッセージが同じdivに表示されます。ウィジェットと検証の初期ビューを正常に実装しました。Ractiveテンプレートの複数のデータオブジェクト
テンプレート
<div> <!-- all the mustache {{}} variables are coming from the loadData() ajax call -->
{{#partial widget-header}}
<header>
<div >
<a href="#"><img alt="logo"><span>{{clientID}}</span></a>
</div>
</header>
{{/partial}} {{>widget-header}}
<section>
<div>
<div>
<form>
<span>Complete required fields </span> {{#partial mandatory}}
<em>*</em> {{/partial}}
{{#each items}}
<div>
<div>
<label>{{dynamicField}}</label>{{>mandatory}}</div>
<div>
<input type="text" name="{{dynamicField}}" maxlength="20">
<div>{{dynamicFieldHelp}}</div>
</div>
</div>
{{/each}}
<div >
<div>
<label>Your Email Id</label>{{>mandatory}}
</div>
<div >
<input type="text" name="email">
<div>enter your email</div>
</div>
</div>
<div >
<input type="button" value="Submit Form" on-click="formValidate">
</div>
</form>
</div>
</div>
</section>
</div>
はJavaScript
this.ractive = new Ractive({
el: 'widgetContent',
template: mainTemplate,
data: function loadData() {
$.ajax({
async: false,
url: "https://example.com/xyz/" +employeeNo,
success: function (response) {
initialData = response.payload[0];
}
});
return initialData; // return the dynamic form elements in data field.
},
oncomplete: function() {
self.center();
}
});
this.ractive.on({
formValidate: function (ev) {
validate the form and send AJAX-POST call then display the response data in a div -
this is where I am stuck..
},
});
しかし、私は二AJAX-POST呼び出しでここに直面しています問題：以下の私のコードです。私はractive初期化で2番目のdataフィールドを使用することができません。この部分はどのように実装できますか？もし私がractiveに2番目のdataフィールドを使用すると、フォーム要素を表示するための最初のAJAX呼び出しを呼び出しません。ですから、私の理解はのように1つのデータフィールドを猛烈な初期化で追加することができます。
このパートを実装するために、コンポーネントなどの高度な概念を使用する必要がありますか？誰かが私にこれを助けることができますか？
注： - 私はあなたが2人のdataメンバーを望んでいない