Как получить значения формы в объект в javascript Windows 8 Metro?

Я создаю приложение Metro для Windows 8 на HTML5/Javascript, и у меня есть несколько экранов, на которых пользователям необходимо заполнять формы. Согласно документации (http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx) и несколько тестов, привязка данных в WinJS, кажется, только из Javascript в пользовательский интерфейс. Как я могу получить то, что пользователь ввел в объект 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>

In my JS, I created an empty object which I bound to my form, subscribed to the click event on createButton, and expected to retrieve an object filled-in with the changes. Here's the code:

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 всегда имеет начальное значение.

Есть ли способ получить объект JavaScript из HTML-формы в WinJS, или я обязан анализировать каждое входное значение по отдельности? Если да, то как лучше всего?

Спасибо, Карл


javascript microsoft-metro winjs windows-8
person canderso    schedule 31.08.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Тем временем вот что я делаю:

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. Для других, таких как флажки или текстовые области, используйте соответствующее свойство вместо значения (например, для флажка).

Если у кого-то есть лучшее решение, я хотел бы услышать его :)

Надеюсь, это поможет, Карл

person canderso    schedule 31.08.2012
comment
Ваше решение практически единственное. Тем не менее, вы можете сделать это простым (мне нравится ваш шаблон), но добавив помощника, который с учетом элемента формы извлечет значение (например, просматривает тег и набирает, чтобы получить правильное значение) - person Dominic Hopton; 31.08.2012
comment
Именно это я и сделал ;) Я добавил функцию getValue, которая принимает в качестве параметров идентификатор элемента и значение по умолчанию и возвращает значение на основе типа ввода (или элемента управления, такого как DatePicker). - person canderso; 11.09.2012