2

HTML5/JavascriptでWindows8Metroアプリを構築していますが、ユーザーがフォームに入力する必要のある画面がいくつかあります。ドキュメント（http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx）といくつかのテストによると、WinJSでのデータバインディングはJavascriptからUIへのデータバインディングのみであるようです。サーバーに投稿できるJavascriptオブジェクトにユーザーが入力した内容を取得するにはどうすればよいですか？

これが私がこれまでに試したことです：

私のHTMLフォーム：

<div id="createFormDiv" class="hide">
<form id="createForm" onsubmit="return false;">
    <fieldset class="formSection entityForm">
        <legend>Create New Address</legend>
        <table class="fields">                      
            <tr><td>Line 1</td><td><input id="i2" type="text" data-win-bind="value: Line1" /></td></tr>                     
            <tr><td>Line 2</td><td><input id="i3" type="text" data-win-bind="value: Line2" /></td></tr>                     
            <tr><td>City</td><td><input id="i4" type="text" data-win-bind="value: City" /></td></tr>                        
            <tr><td>Zip</td><td><input id="i5" type="text" data-win-bind="value: Zip" /></td></tr>                      
            <tr><td>Country</td><td><input id="i6" type="text" data-win-bind="value: Country" /></td></tr>                      
            <tr><td>Contact</td><td><input id="i7" type="text" data-win-bind="value: Contact" /></td></tr>                                              
        </table>
        <button id="cancelCreateButton" class="button">Cancel</button>
        <button id="createButton" type="submit" class="button">Create</button>
    </fieldset>
</form>

私のJSでは、フォームにバインドした空のオブジェクトを作成し、createButtonのクリックイベントをサブスクライブし、変更が入力されたオブジェクトを取得することを期待していました。コードは次のとおりです。

var element = document.getElementById("createFormDiv");
var data = {
    Line1: "",
    Line2: "",
    City: "",
    Zip: "",
    Country: ""
};
WinJS.Binding.processAll(element, data);
_bindingSource = WinJS.Binding.as(data);

その後：

function onCreateCommandClick(args) {
    var Line2 = _bindingSource.getProperty("Line2");
}

問題は、Line2プロパティには常に初期値があることです。

WinJSのHTMLフォームからJavaScriptオブジェクトを取得する方法はありますか、それとも各入力値を個別に解析する必要がありますか？もしそうなら、最善の方法は何でしょうか？

ありがとう、カール

4

1 に答える 1

1

その間、私がやっていることは次のとおりです。

var form = document.getElementById("createForm");
var data = { 
  Line1: form.i2.value, 
  Line2: form.i3.value, 
  City: form.i4.value, 
  Zip: form.i5.value, 
  Country: form.i6.value, 
  Contact: form.i7.value,
};

これは、value プロパティを使用した入力がある限りうまく機能します。チェックボックスやテキストエリアなどのその他の場合は、値の代わりに適切なプロパティを使用します (たとえば、チェックボックスをオンにします)。

誰かがより良い解決策を持っているなら、私はそれを聞きたいです:)

これが役に立てば幸いです、カール

于 2012-08-31T10:23:07.713 に答える