我的屏幕有一个主视图模型。它由 2 个 subview 模型组成。
其中一个负责注册部分。 其中一个处理登录部分。 其中一个负责处理菜单部分(如果经过身份验证,可以显示哪些菜单项,以及“欢迎“用户名”类型的内容)。
$(document).ready(function () {
// Create the main View Model
var vm = {
loginVm: new LoginViewModel(),
registerVm: new RegisterViewModel(),
layoutVm: new LayoutViewModel()
}
// Get the Reference data
var uri = '/api/Reference/GetTimezones';
$.getJSON({ url: uri, contentType: "application/json" })
.done(function (data) {
vm.registerVm.Timezones(data);
});
// Bind.
ko.applyBindings(vm);
});
一旦我的登录模型的“Login”方法完成,我想在菜单模型中设置“IsAthenticated”值以及一些其他用户信息。
因此,在我的登录模型中,我有一个 SignIn 方法。
$.post({ url: uri, contentType: "application/json" }, logindata)
.done(function (data) {
toastr[data.StatusText](data.DisplayMessage, data.Heading);
if (data.StatusText == 'success') {
alert($parent.layoutVm.IsAuthenticated());
}
else {
}
})
.fail(function () {
toastr['error']("An unexpected error has occured and has been logged. Sorry about tbis! We'll resolve it as soon as possible.", "Error");
});
警报代码是我的测试。我希望访问(并设置)layoutVm 模型的 IsAuthenticated 属性。这是我的主视图模型上的子模型之一。
但是,“$parent”未定义。
如何从我的登录Vm 更新layoutVm 中的值?
最佳答案
$parent
是 binding context 的一部分,仅在数据绑定(bind)评估期间可用(即绑定(bind)处理程序)。
在您的 View 模型结构中,您必须自己想出一种在模型之间进行通信的方法。例如,通过传递父 View 模型,或传递共享的可观察量。您描述的问题可以通过使用 data-bind="visible: $root.userVM.IsAuthenticated"
来解决,就像我在上一个问题中回答的那样。
如果您想采用其他方法,这里有一个关于如何在 View 模型之间共享可观察对象的示例。
var ChildViewModel = function(sharedObs) {
this.myObs = sharedObs;
this.setObs = function() {
this.myObs(!this.myObs());
}.bind(this);
}
var RootViewModel = function() {
this.myObs = ko.observable(false);
this.vm1 = new ChildViewModel(this.myObs);
this.vm2 = new ChildViewModel(this.myObs);
this.vm3 = new ChildViewModel(this.myObs);
}
ko.applyBindings(new RootViewModel());
div { width: 25%; display: inline-block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="with: vm1">
<h4>vm1</h4>
<p data-bind="text: myObs"></p>
<button data-bind="click: setObs">
flip
</button>
</div>
<div data-bind="with: vm2">
<h4>vm2</h4>
<p data-bind="text: myObs"></p>
<button data-bind="click: setObs">
flip
</button>
</div>
<div data-bind="with: vm3">
<h4>vm3</h4>
<p data-bind="text: myObs"></p>
<button data-bind="click: setObs">
flip
</button>
</div>
请注意,每个 subview 模型也具有写入权限,因此您必须小心,不要意外更新可观察对象
关于javascript - subview 模型修改不同的 subview 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40701546/