Javascript 如何根据函数返回的布尔值使用条件显示不同的元素？_Javascript_Html_Polymer

Javascript 如何根据函数返回的布尔值使用条件显示不同的元素？

javascript html polymer

Javascript 如何根据函数返回的布尔值使用条件显示不同的元素？,javascript,html,polymer,Javascript,Html,Polymer,我一直试图解决这个问题，但没有成功我的代码是： [...] <script src="lib/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="lib/polymer/polymer.html"> <link rel="import" href="components/app-layout.html"> <

我一直试图解决这个问题，但没有成功

我的代码是：

[...]
    <script src="lib/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="lib/polymer/polymer.html">
    <link rel="import" href="components/app-layout.html">
    <link rel="import" href="components/disconnected-layout.html">
</head>
<body unresolved>
    <template>
        <script>
        Polymer({
            connected: function() {
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.open( "GET", "127.0.0.1:5021", false );
                xmlHttp.send( null );
                var connection = JSON.parse(xmlHttp.responseText);
                if (connection.success == undefined)
                {
                    return false;
                }
                return !!connnection.success;
            }
        });
        </script>
[...]

[…]
聚合物({
已连接：函数（）{
var xmlHttp=new XMLHttpRequest（）；
open（“GET”，“127.0.0.1:5021”，false）；
xmlHttp.send（空）；
var connection=JSON.parse（xmlHttp.responseText）；
if（connection.success==未定义）
{
返回false；
}
return！！connection.success；
}
});
[...]

上面的这部分检查与服务器的连接

在下一部分中，应选择右显示：

[...]
        <template is="dom-if" if="{{connected()}}">
            <app-layout></app-layout>
        </template>
        <template is="dom-if" if="{{!connected()}}">
            <disconnected-layout></disconnected-layout>
        </template>
[...]

[…]
[...]

但浏览器显示的不是连接/断开连接的布局，而是空白页面。

如何解决此问题？

聚合物绑定用于绑定到属性或“计算属性”，这些属性是在某些其他属性发生更改时从函数动态生成的属性

您可以尝试以下普通属性：

Polymer({
  properties: {
    connected: {
      type: Boolean,
      value: function() {
        // code which returns true/false depending on whether you're connected
      }
    }
  }
});

当Polymer创建您的元素时，它将运行该函数来确定

connected

属性的初始值，然后可以将该属性绑定到您的示例中。需要注意的是，该值只计算一次，因此，如果您的客户端稍后脱机，则不会更新连接的


计算属性类似，只是它们允许您在属性所依赖的元素上定义其他属性：
Polymer({
  properties: {
    otherProperty: String,
    connected: {
      type: Boolean,
      computed: '_isConnected(otherProperty)'
    }
  },

  _isConnected: function(otherProperty) {
    return otherProperty !== null;
  }
})

这将导致您的属性在其他属性更改时随时更新
根据应用程序的不同，您可能希望订阅浏览器的以动态更新此内容，为此在事件处理程序中将connected
设置为true
或false

看起来您有特定的逻辑来检测连接性：从您机器上运行的服务器中查找响应。您可能最终需要创建一个间隔（setInterval
）来定期检查并相应地更新属性。
感谢您的响应，但它仍然不起作用。我还尝试将值硬编码为true，但没有效果。