我的knockoutjs 实现遇到问题。似乎在 Chrome 和 Safari 上运行良好,IE 和 FF 却出现了问题。
我遇到的消息如下:
Unable to parse bindings. Message: TypeError: 'AccountName' is undefined; Bindings value: value: AccountName
问题发生在用作 knockout 模板的脚本标记内:
<div id="newAccountDialog" class="dialog" data-bind="dialog: { autoOpen: false, resizable: false, modal: true, width: 350, title: 'Exchange Account'}, template: { name: 'dialogFormTemplate', data: CurrentAccount }, openDialog: IsNew"></div>
<script id="dialogFormTemplate" type="text/html">
<form id="dialogForm">
<h1>Exchange Account Manager</h1>
<p>Add new or edit an existing exchange account settings.</p>
<label for="AccountName">
Account
</label>
<input id="AccountName" name="AccountName" type="text" data-bind="value: AccountName, valueUpdate: 'afterkeydown'" class="ui-widget-content ui-corner-all" />
<div class="buttonsContainer floatRight">
<button id="Save" data-bind="click: $root.SaveAccount, dialogcmd: { id: 'newAccountDialog', cmd: 'close'}, jqButton: { icons: { primary: 'ui-icon-disk' } }">Save & Close</button>
</div>
</form>
</script>
我假设模板上正在触发某种早期绑定(bind)
data : CurrentAccount
其中未定义/null 被传递到 CurrentAccount。我在脚本标记之外看到过这个问题,但前提是可观察值未定义或为空。
我的 View 模型如下所示:
var AccountModel = function () {
var self = this;
self.Accounts = ko.observableArray([]);
self.CurrentAccount = ko.observable(null);
self.IsNew = ko.observable(false);
self.LoadAccounts = function () {
$account.invoke("GetAccounts", {}, function (data) {
var mapped = $.map(data, function (item) {
var account = new Account(item);
var innerMapped = $.map(item.Mailboxes, function (mailbox) {
return new Mailbox(mailbox);
});
account.Mailboxes(innerMapped);
return account;
});
self.Accounts(mapped);
});
}
self.EditAccount = function (data) {
self.CurrentAccount(data);
self.IsNew(true);
}
self.SaveAccount = function () {
if (self.CurrentAccount().Id() <= 0) {
$account.invoke('AddAccount', ko.toJS(self.CurrentAccount()), function (data) {
self.Accounts.push(new Account(data));
self.CurrentAccount(new Account(data));
self.IsNew(true);
});
} else {
$account.invoke('UpdateAccount', ko.toJS(self.CurrentAccount()), function (data) {
//self.CurrentAccount(new Account(data));
});
}
}
self.CreateAccount = function () {
self.IsNew(true);
var account = { Id: 0, AccountName: '', IsNTLM: -1, Email: '', Password: '', Domain: 'mydomain', ExchangeVersion: 1, Mailboxes: [] };
self.CurrentAccount(new Account(account));
}
};
我的对话框绑定(bind)处理程序定义如下:
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).dialog('destroy');
});
$(element).dialog(options);
}
};
我已经省略了 Account 对象,因为在此上下文中可能不需要它。
如果有任何帮助,我将不胜感激。
提前谢谢您。
最佳答案
Knockout 中没有“早期”绑定(bind)。当您调用 ko.applyBindings 时,所有内容都会被绑定(bind)。但某些绑定(bind)可以停止或延迟其后代元素的绑定(bind)。 template
是使用 if
或 ifnot
选项时的模板之一。对于您的情况,您可以使用 if
选项,如下所示:
template: { name: 'dialogFormTemplate', data: CurrentAccount, 'if': CurrentAccount }
注意:在某些较旧的浏览器中,if
周围的引号是必需的。
关于javascript - knockoutjs 绑定(bind)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15079845/