[英]Applying binding to knockoutjs ViewModel in a bootstrap modal
[英]KnockoutJS - bootstrap 3 modal binding doesn't working
我有一個Bootstrap模式div:
<div class="modal fade" id="modalLoginData" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Login Data</h4>
</div>
<div class="modal-body">
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="sr-only">Username</label>
<input type="text" class="form-control" placeholder="Username" data-bind="value: username" />
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password" data-bind="value: password" />
</div>
<div class="form-group col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label class="sr-only">Repeat your password</label>
<input type="password" class="form-control" placeholder="Repeat your password" data-bind="value: repeatedPassword" />
</div>
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="sr-only">Login</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-sm" data-bind="click: confirmLoginData">Confirm</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal" data-bind="click: cancelLoginData">Cancel</button>
</div>
</div>
</div>
我正在通過JS打開此模式。
好的,如果我將username屬性設置為某個值...
function Model() {
this.username = ko.observable("kiwanax");
}
...該值正確顯示在該模態div 之外的span元素上...
<span data-bind="text: username"></span>
...但無法在上面的模式div中的該文本框上使用。
有人知道發生了什么嗎?
謝謝!
正如其他人已經提到的那樣,發布更完整的代碼版本將大大有助於其他人為您提供幫助。 在不發布您編寫的JavaScript的情況下,人們只能猜測您在做什么。
話雖如此,這是您的模態示例,其中剔除確實在模態內部以及模態外部都顯示了用戶名 。
http://jsbin.com/AFORuzAT/2/edit
$('#modalLoginData').modal();
function Model() {
this.username = ko.observable("kiwanax");
this.password = ko.observable();
this.repeatedPassword = ko.observable();
this.cancelLoginData = function () {
console.log( 'cancel!' );
};
this.confirmLoginData = function () {
console.log( 'confirm login data!' );
};
}
ko.applyBindings(new Model());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.