如何从聚合物dom模块内的函数返回数据?

时间:2015-10-07 20:41:21

标签: javascript polymer web-component

我是聚合物的新手,所以我在这里尝试使用聚合物dom模块中的函数返回一些简单的数据,其中:

Username and date: <p>{{test()}}</p>

应该显示名称和日期,但实际上什么也没有返回。我的代码有什么问题吗?我还在chrome中使用了调试器,当调用return时,对象实际上就在那里。

<dom-module id="user-list-module">
  <template>
      <paper-material elevation="1">
        Username and date: <p>{{test()}}</p>
      </paper-material>
  </template>

  <script>
    (function() {
      Polymer({
        is: 'user-list-module',
        properties: {
            username: String,
            joined: Date,
        },
        test: function () {
          this.username = '';
          this.joined = '';
          var fb = new Firebase('https://blistering-torch-8317.firebaseio.com/users/public/');
          fb.on('value', function(snapshot) {
            snapshot.forEach(function(childSnapshot){
              var key = childSnapshot.key();
              var childData = childSnapshot.val();
              this.username = childData.username;
              this.joined = childData.date.split(' ').slice(0, 4).join(' ');
              return this.username + ' ' + this.joined;
            });
          })
        }
      });
    })();
  </script>
</dom-module>

enter image description here

3 个答案:

答案 0 :(得分:2)

function test()不会返回任何内容(它是返回内容的'value'事件处理程序。)

我建议您切换到使用firebase聚合物元素:

https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection

或将'test()'中的firebase代码移动到'ready()'函数,并将'test()'简单地称为“return this.username +''+ this.joined;”,如果这符合你的意图。

TBH,由于快照似乎是一个集合(即forEach()暗示多个用户名+加入),因此不太清楚你想要什么,但你的html似乎只想要一个用户名+加入,属性声明也反映了这一点 - 也许您还想考虑使用dom-repeat模板? Hrm,也许您只希望快照的最后一个值是相关的。抱歉,这有点令人困惑。

答案 1 :(得分:1)

原始代码中存在两个问题:由于class MyJob implements org.quartz.Job { private MyDelegate delegate = new MyDelegate(); @Override public void execute(JobExecutionContext context) throws JobExecutionException { String arg = context.getMergedJobDataMap().getString("arg"); delegate.run(arg); } } 方法是异步的,因此on方法无法返回值。当您的回调被调用时,test已经返回。

test

其中Username and date: <p><span>{{combine(firstname, joined)}}</span></p> 是这样的函数:

combine

或没有这个功能:

combine: function(first, date) {
  return first + ' ' + date;
}

然后从Username and date: <p><span>{{firstname}}</span> <span>{{joined}}</span></p> 启动现有的test方法。

ready

答案 2 :(得分:0)

<template>中的所有数据绑定需要包含在<span>中。像这样:

Username and date: <p><span>{{test()}}</span></p>