javascript Knockout js - && in if 条件和无容器绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16375518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout js - && in if condition and containerless binding
提问by Ashwin
I am displaying a list of items and if the items are not available I have to display a default message. Now, I have to check whether the object has been created and then check the object has the list in it.
我正在显示项目列表，如果项目不可用，我必须显示默认消息。现在，我必须检查对象是否已创建，然后检查对象是否包含列表。
So now, I am doing the below and it works it creates unnecessary dom elements. But, when I do the same with the containerless binding it doesn't seem to work and also is there an && syntax for if in KO
所以现在，我正在做下面的事情，它可以创建不必要的 dom 元素。但是，当我对无容器绑定执行相同操作时，它似乎不起作用，并且在 KO 中是否有 && 语法
<span data-bind="if: object">
<span data-bind="if: !object().property">
<p> The list is not available </p>
</span>
</span> // Works
<!-- ko if: object -->
<!-- ko if: !object().property -->
<p> The list is not available </p>
<!-- /ko -->
<!-- /ko --> // Doesn't work
Thanks
谢谢
回答by Ricardo Medeiros Penna
As mentioned by CodeThug, using the solutions you provided would display the message until ko.applyBindings have finished. A more verbose solution, but that would avoid the problem without relying on CSS, is to use dynamic templates as shown in the following jsfiddle:
正如 CodeThug 所提到的，使用您提供的解决方案将显示消息，直到 ko.applyBindings 完成。一个更详细的解决方案，但可以在不依赖 CSS 的情况下避免问题，是使用动态模板，如下面的 jsfiddle 所示：
This will create the valid markup inside the virtual element only when the ko.applyBindings is done.
仅当 ko.applyBindings 完成时，这才会在虚拟元素内创建有效标记。
<!-- ko template: { name: dinamycList } -->
<!-- /ko -->
<script type="text/html" id="empty-template">
... list is NOT available markup ...
</script>
<script type="text/html" id="list-template">
... list is available markup ...
</script>
Being dinamycList a function that returns the name of the template according to the verifications you want for a valid list.
作为 dinamycList 一个函数，它根据您想要的有效列表的验证返回模板的名称。
EDIT:
编辑：
Reading thru your last comment made me think if the behaviour that you want is to display the "not avaiable template" only after calculating the list and the property is false, if thats the case, the following fiddle will fix the last one to provide the right condition.
通读您的最后一条评论让我想到，如果您想要的行为是仅在计算列表并且属性为 false 后才显示“不可用模板”，如果是这种情况，以下小提琴将修复最后一个以提供正确的条件。
The "if" condition in template will handle the moment after knockout is ready, but before the list is. If the condition gets too messy, i would advise to put it inside a ko.computed for a clear markup.
模板中的“if”条件将在淘汰赛准备好之后但在列表之前处理。如果条件变得太混乱，我建议将它放在 ko.computed 中以获得清晰的标记。
<!-- ko template: { name: dinamycList, if: object() !== undefined && object().property !== undefined } -->
<!-- /ko -->
回答by Anders
THis is very easy with my Convention over configuration lib
使用我的约定优于配置库，这很容易
Just this and the lib will do the templatating for you
只是这个，lib 会为你做模板
this.items.subscribe(function(items) {
if(items.length === 0) {
this.items.push(new MyApp.EmptyViewModel());
}
}, this);
回答by CodeThug
As you have seen, the element exists in the DOM, and it won't be removed until the ko.applyBindings call is finished. Thus the momentary display of this message.
如您所见，该元素存在于 DOM 中，并且在 ko.applyBindings 调用完成之前它不会被删除。因此，此消息的瞬时显示。
I'd try hiding the entire section of the DOM and show a loading indicator instead. When ko/ajax is done, the loading indicator can then be removed and the markup you care about displayed.
我会尝试隐藏 DOM 的整个部分并改为显示加载指示器。当 ko/ajax 完成后，加载指示器就可以被移除，你关心的标记就会被显示出来。
Alternately, you could see if your page is taking a while to load and try to improve the load time of the page. The chrome profiling tools can help with this.
或者，您可以查看您的页面是否需要一段时间才能加载并尝试改善页面的加载时间。chrome 分析工具可以帮助解决这个问题。
