Если вы собираете входные данные в массив, вы можете просто фильтровать и объединять их, независимо от того, сколько у вас параметров. Таким образом, вам не нужно писать новый код каждый раз, когда вы добавляете параметр, поскольку начало строки запроса ?
всегда будет идти до соединения массива и разделителя &
между элементами массива. Я переместил классы параметров на входы, так как это имело для меня больший смысл, чем на этикетках.
const create_uri = () => {
const parameters = [ ...document.querySelectorAll( '.parameter' ) ];
const root = 'https://domain.tld';
const query_string = parameters.map( input => input.value ? `${ input.id }=${ input.value }` : '' );
return `${ root }?${ encodeURIComponent( query_string.join( '&' )) }`;
};
const parammeterize = () => {
const uri = create_uri();
console.log( uri );
};
document.getElementById('add_parameters').addEventListener('click', parammeterize);
<div id="parameters" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">
<label>parameter 0:</label>
<input type="text" class="select-selected parameter" id="parameter0" name="parameter0" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 1:</label>
<input type="text" class="select-selected parameter" id="parameter1" name="parameter1" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 2:</label>
<input type="text" class="select-selected parameter" id="parameter2" name="parameter2" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 3:</label>
<input type="text" class="select-selected parameter" id="parameter3" name="parameter3" maxlength="64">
</li>
<li class="list-group-item">
<label>parameter 4:</label>
<input type="text" class="select-selected parameter" id="parameter4" name="parameter4" maxlength="64">
</li>
</ul>
<button id="add_parameters" name="submit" class="btn btn-primary">
APPLY
</button>
</div>
Вы выставите свойство из вашей ViewModel, которое ссылается на команду.
class MyViewModel
{
public RoutedCommand SaveCmd{ get{ return Commands.SaveCustomer; } }
}
Затем в XAML
<Button Command="{Binding SaveCmd}" />
Однако, вам может оказаться проще использовать RelayCommand так что вы также можете определить фактическую командную логику в вашей модели.