Question

我创建了一个自定义元素来显示聊天列表，如下所示：

<dom-module id="contact-element">
  <style>
    --paper-card: {
      width: 100%;
    }
    .edit{
      display: block;
    }
    .last{
      color: #A7A7A7;
      font-size: 14px;
      margin-top: 4px;
    }
  </style>
  <template>
    <template is="dom-repeat" items="{{contacts}}">
      <div>
        <paper-card class="contactcard" on-click="setUser">
          <div class="card-content">
            <div>{{ item.name }}</div>
            <div class="last">{{ item.last }}</div>
          </div>
        </paper-card>
      </div>
    </template>
  </template>
  <script>
    HTMLImports.whenReady(function () {
      Polymer({
        is: 'contact-element',
        properties: {
          user: {
            type: Object,
          },
          username: {
            type: String,
            reflectToAttribute: true,
          }
        },
        ready: function(){
          this.contacts = [
            {name: "Rajat",last: "How are you!", unread: 1},
            {name: "Neeraj",last: "Okay", unread: 0},
            {name: "Vaibhav"},
            {name: "Rohit"},
            {name: "Hitesh"},
          ];
        },
        setUser: function(e){
          var model = e.model;
          this.user = model.get('item');
          this.username = this.user.name;
          console.log("user set: "+model.get('item.name'));
        }
      });
    });
  </script>
</dom-module>

我希望当用户点击任何一个对象时，工具栏应该得到名称。为此我正在使用：

<paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle paper-drawer-left></paper-icon-button>
                <span class="flex"></span>

                <!-- Title -->
                <div class="app-name flex">[[ pagetitle ]]</div>

                <paper-icon-button icon="add-alert"></paper-icon-button>
                <paper-icon-button icon="question-answer" paper-drawer-toggle paper-drawer-right></paper-icon-button>
              </paper-toolbar>

但它不起作用。有什么帮助吗？

Answer 1

我通过将properties: { user: { type: Object, notify: true }, username: { type: String, reflectToAttribute: true, } },放入脚本标记来解决此问题：

#include <boost/fusion/adapted/std_tuple.hpp>
#include <boost/fusion/include/algorithm.hpp>
#include <boost/phoenix/phoenix.hpp>

template<typename AlgorithmT, typename ...T>
struct Trait
{
    using A = AlgorithmT;

    size_t hash_value_;
    std::tuple<std::string> value_;

    Trait(T... data) :
        hash_value_(A::Hash(data...)),
        value_(A::Transform(data...)) {}
    size_t hash() const { return this->hash_value_; }

    std::string toString() const
    {
        using namespace boost::phoenix::arg_names;

        const std::string result = boost::fusion::accumulate(this->value_, std::string{} /* initila state */, A());
        return result;
    }
};

struct IdentityAlgorithms
{
    typedef std::string result_type;

    static constexpr size_t (*Hash)(std::string const&) = &boost::hash_value;
    static constexpr auto Transform = &identity_transform<std::string>;

    std::string operator()(const std::string& str, const std::string &value) const
                                          //  ^ state                 ^ element of squence
    {
        std::cerr << "ToString invoked! value: '" << value << "'" << std::endl;
        return "\"" + value + "\"";
    }
};

通知让数据更改事件反弹到包含我们自定义元素的元素。

聚合：将自定义元素的数据绑定到主文档

1 个答案: