我有一个组件,我该如何选择其中一个元素？
我正在尝试获取该组件模板中的输入.
可能有多个组件,因此queryselector必须只解析组件的当前实例.
Vue.component('somecomponent', {
template: '#somecomponent',
props: [...],
...
created: function() {
somevariablehere.querySelector('input').focus();
}
});
提前致谢
我正在使用聚合物cli的聚合物应用抽屉模板.
我遇到了一些麻烦:
有没有办法销毁和创建页面/元素或暂停和启用？
什么是处理这个问题的最佳做法？
页面是否实现了create和destroy方法,并在更改页面时调用它？
即
oldPageElement.destroy();
newPageElement.create();
Polymer({
is: 'my-random-page',
behaviors: [MyBehaviors.CommonPageBehavior],
/**
* @override
*/
create: function() {..}
/**
* @override
*/
destroy: function() {..}
})
我试图创建一个可切换的菜单,但由于某种原因,隐藏的属性将无法正常工作.它不适用于任何一个值,所以我不认为它是一个数据绑定问题.
我在我的项目的其他部分和其他javascript搜索和框架中使用此方法它永远不会变得更复杂,所以我看不出我做错了什么.
有任何想法吗？
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<dom-module id="user-account-menu">
<template>
<style>
img {
width: 72px;
height: 72px;
}
paper-menu {
position: absolute;
right: 15px;
width: 200px;
background: #A3A3A3;
}
</style>
<firebase-auth
id="auth"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
<!-- start the account dropdon -->
<div>
<img src="{{computePhotoURL()}}">
<paper-menu hidden$="{{show}}">
<paper-item>This is a menu item</paper-item>
<paper-item>[[show]]</paper-item>
</paper-menu>
</div>
</template>
<script>
Polymer({
is: 'user-account-menu',
properties: {
show: {
type: Boolean,
value: true
}
},
computePhotoURL: function() { …当我通过链接或通过JS this.set('route.path','packages')更改页面时; _routePageChagned方法正在运行两次.它也发生在第一次加载页面时.
这也发生在CLI的默认聚合物入门套件模板构建中.
我错过了什么？怎么会发生这种情况？
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="pages/my-loading.html">
<dom-module id="my-app">
<template>
<style>
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-pages
id="pages"
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
selected-attribute="visible"
role="main">
<my-loading name="loading"></my-loading>
<my-login name="login"></my-login>
<my-view404 name="view404"></my-view404>
<my-view403 name="view403"></my-view403>
<my-packages name="packages"></my-packages>
</iron-pages>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
/**
* The current page.
*/
page: {
type: String,
reflectToAttribute: true
},
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) …我正在使用bower bower安装firebase/polymerfire的firebase/polymerfire包
如何在触发方法后在数据库中创建一些数据？
文档标记看起来会显示和更新数据.我想,当用户注册时,创建一些供用户使用的数据.
app.signInAnonymously = function() {
this.error = null;
this.$.auth.signInAnonymously();
// add default data for the user template
};
我如何使用默认的set()或推送方法,如普通的SDK？
我怎样才能在JavaScript的事件中调用它？
尝试将路径绑定到我的文档时
<firebase-document
path="/"
data="{{firebaseData}}">
</firebase-document>
{{firebaseData}}
数据不会显示,但我有身份验证工作.
我已经安装了一个新的Polymer Starter Kit,并且有以下代码.
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>
如何在布局加载时关闭app-drawer元素？
如果我在元素上触发.close()应该何时运行？它不适用于准备好的或附加的生命周期回调
但这意味着菜单打开和关闭,我想避免,我真正想要发生的是当页面加载菜单关闭时,
当我从服务器收到一个回调来说用户已经过身份验证然后打电话
this.$.menu.open() // where i've given app-drawer the if of menu