2

我正在用 HTML5/Javascript 构建一个 Windows 8 Metro 应用程序，并且我有几个屏幕，用户需要在其中填写表格。根据文档（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 上的 click 事件，并期望检索一个填充了更改的对象。这是代码：

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 回答