I have a view model. Person is retrieved from an ajax call
我有一个视图模型。从ajax调用中检索Person
var vm = ko.mapping.fromJS(persons, {});
vm.Hobbies = ko.observableArray();
// other vm objects
After the viewModel is loaded I display the page, now I want to load another part(hobbies) to the view model (working)
加载viewModel后我显示页面,现在我想将另一个部分(爱好)加载到视图模型(工作)
// ...ajax call...
success: function(results){
ko.utils.arrayForEach(results.hobbies, function(item) {
vm.Hobbies.push(item);
});
debugger
}
// ...end ajax call...
On the debugger I can see that my Hobbies are now populated.
在调试器上,我可以看到我的爱好现在已经填充。
I have a view that is loaded in on page load
我有一个在页面加载时加载的视图
<!--ko if: $data.Hobbies-->
<div>
<ul class="fares-by-date-carousel" data-bind="foreach: Hobbies()">
<li>2</li>
</ul>
</div>
<!-- /ko -->
At the start this portion does not load (as the expensive ajax call hasn't been called yet, which is fine) but after the vm.Hobbies is populated the above html section still never displays.
在开始时这个部分没有加载(因为尚未调用昂贵的ajax调用,这很好)但是在填充了vm.Hobbies之后,上面的html部分仍然没有显示。
not sure what I am missing
不确定我错过了什么
1 个解决方案
#1
0
The issue is with your usage of:
问题在于您使用:
<!--ko if: $data.Hobbies-->
This should be used when you are scoping to a parent context that is being iterated over. For example you might to something like:
当您确定要迭代的父上下文时,应该使用此方法。例如,你可能会这样:
<!--ko foreach: Person -->
<!--ko if: $data.Hobbies-->
In this example $data represents each Person, so the following if check will assess if each Person has a hobby.
在此示例中,$ data表示每个Person,因此如果检查将检查每个Person是否有业余爱好。
If you are not using this structure (with no parent context) then you don't need to scope using $data, you can either use $root for the view model scope (which works even when nested) or leave it off all together. Both should work:
如果您没有使用此结构(没有父上下文),那么您不需要使用$ data作为范围,您可以使用$ root作为视图模型范围(即使在嵌套时也可以工作)或者将它们全部放在一起。两者都应该有效:
<!--ko if: $root.Hobbies-->
<!--ko if: Hobbies-->
Knockout Binding Context
$parent - This is the view model object in the parent context, the one immediately outside the current context. In the root context, this is undefined.
$ parent - 这是父上下文中的视图模型对象,紧邻当前上下文之外的对象。在根上下文中,这是未定义的。
$root - This is the main view model object in the root context, i.e., the topmost parent context. It’s usually the object that was passed to ko.applyBindings. It is equivalent to $parents[$parents.length - 1].
$ root - 这是根上下文中的主视图模型对象,即最顶层的父上下文。它通常是传递给ko.applyBindings的对象。它相当于$ parents [$ parents.length - 1]。
$data - This is the view model object in the current context. In the root context, $data and $root are equivalent. Inside a nested binding context, this parameter will be set to the current data item (e.g., inside a with: person binding, $data will be set to person). $data is useful when you want to reference the viewmodel itself, rather than a property on the viewmodel.
$ data - 这是当前上下文中的视图模型对象。在根上下文中,$ data和$ root是等效的。在嵌套绑定上下文中,此参数将设置为当前数据项(例如,在with:person绑定内,$ data将设置为person)。当您想要引用viewmodel本身而不是viewmodel上的属性时,$ data非常有用。
#1
0
The issue is with your usage of:
问题在于您使用:
<!--ko if: $data.Hobbies-->
This should be used when you are scoping to a parent context that is being iterated over. For example you might to something like:
当您确定要迭代的父上下文时,应该使用此方法。例如,你可能会这样:
<!--ko foreach: Person -->
<!--ko if: $data.Hobbies-->
In this example $data represents each Person, so the following if check will assess if each Person has a hobby.
在此示例中,$ data表示每个Person,因此如果检查将检查每个Person是否有业余爱好。
If you are not using this structure (with no parent context) then you don't need to scope using $data, you can either use $root for the view model scope (which works even when nested) or leave it off all together. Both should work:
如果您没有使用此结构(没有父上下文),那么您不需要使用$ data作为范围,您可以使用$ root作为视图模型范围(即使在嵌套时也可以工作)或者将它们全部放在一起。两者都应该有效:
<!--ko if: $root.Hobbies-->
<!--ko if: Hobbies-->
Knockout Binding Context
$parent - This is the view model object in the parent context, the one immediately outside the current context. In the root context, this is undefined.
$ parent - 这是父上下文中的视图模型对象,紧邻当前上下文之外的对象。在根上下文中,这是未定义的。
$root - This is the main view model object in the root context, i.e., the topmost parent context. It’s usually the object that was passed to ko.applyBindings. It is equivalent to $parents[$parents.length - 1].
$ root - 这是根上下文中的主视图模型对象,即最顶层的父上下文。它通常是传递给ko.applyBindings的对象。它相当于$ parents [$ parents.length - 1]。
$data - This is the view model object in the current context. In the root context, $data and $root are equivalent. Inside a nested binding context, this parameter will be set to the current data item (e.g., inside a with: person binding, $data will be set to person). $data is useful when you want to reference the viewmodel itself, rather than a property on the viewmodel.
$ data - 这是当前上下文中的视图模型对象。在根上下文中,$ data和$ root是等效的。在嵌套绑定上下文中,此参数将设置为当前数据项(例如,在with:person绑定内,$ data将设置为person)。当您想要引用viewmodel本身而不是viewmodel上的属性时,$ data非常有用。