У меня есть jsFiddle пример здесь: http://jsfiddle.net/vsZhg/Bootstrap форма модальных не представит с выколотки Передать связывание
Я строю форму внутри моей начальной загрузки модальный. Проблема заключается в том, что, если пользователь не нажимает на ввод отправки, привязка отправки нокаута никогда не выполняется. Я подозреваю, что bootstrap предотвращает выполнение нокаута от выполнения, однако я не уверен, как решить эту проблему.
Если вы нажали клавишу ввода, модальный диалог закрывается, и функция привязки никогда не выполняется (в результате я не могу отправить данные). Однако, если вы нажмете на вход отправки, привязка выполняется, как ожидалось.
Вот соответствующий код:
Сценарий:
function ArticleViewModel() {
var self = this;
self.SendArticleName = ko.observable('');
self.SendArticleEmail = ko.observable('');
self.SendArticle = function() {
$.ajax('http://example.com', {
data: ko.toJSON({ name: self.SendArticleName, email: self.SendArticleEmail }),
type: "post", contentType: "application/json",
success: function(result) {
$('#share-modal').modal('hide');
}
});
};
}
var articleViewModel = new ArticleViewModel();
ko.applyBindings(articleViewModel);
HTML:
<div id="share" class="row article-section">
<div class="span12">
<h4>Share</h4>
<a class="btn btn-large" role="button" data-toggle="modal" href="#share-modal"><i class="icon-envelope"></i> Share This Article</a>
<div id="share-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form class="form-horizontal" data-bind="submit: SendArticle" class="modal-form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Share</h3>
</div>
<div class="modal-body">
<p>Who would you like to send the article to?</p>
<br />
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" placeholder="Name" data-bind="value: SendArticleName" />
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" placeholder="Email" data-bind="value: SendArticleEmail" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<input type="submit" value="Send" />
</div>
</form>
</div>
</div>
</div>
Ах-ха! Вы абсолютно правы. Раньше я общался с этим, но это полностью сошло с ума. В ближайшее время я помету это как ответ. Я собираюсь переключить кнопку отмены на '', чтобы обойти эту проблему. Благодаря! –
вы можете просто добавить type = "button", чтобы исправить это –