Question

不知何故，放在{{color}}和{{avatar}}内的变量不会被实际内容解释/交换。见下面的例子：

<paper-toolbar id="navheader" class="tall">
   <div class="middle avatar {{color}}" style="background-image: url({{avatar}})"></div>
   <div class="bottom uuid">{{uuid}}</div>
</paper-toolbar>

如果我将颜色变量放在uuid所在的位置，它将打印正确的color，这意味着变量未被设置或不是published 。似乎" - 字符在某种程度上干扰了，我做错了什么？可能值得一提的是，这是在“主要”文件中完成的。

以下完整代码：

<paper-drawer-panel id="drawerPanel" responsive-width="1280px">
<div class="nav" drawer>
        <paper-toolbar id="navheader" class="tall">
            <div class="middle avatar {{color}}" style="background-image: url({{avatar}})"></div>
            <div class="bottom uuid">{{uuid}}</div>
        </paper-toolbar>


    <section class="layout vertical" id="onlineList">
        <paper-item label="Online Now" class="subdue layout horizontal center"></paper-item>
        <template is="dom-repeat" items="{{cats}}" as="cat">
            <paper-item label="{{cat}}"></paper-item>
        </template>
    </section>
</div>

<paper-header-panel main mode="waterfall">

<paper-toolbar>
        <div class="flex">Kitteh Anonymous</div>
        <iron-icon icon="account-circle"></iron-icon><span>{{occupancy}}</span>
</paper-toolbar>

<!-- Main Content -->
<div class="layout vertical fit" id="chat">
        <div class="chat-list flex">
        <!--<x-chat-list avatar="url" username="name" text="hello" status="online" timestamp="1420145273945"></x-chat-list>-->
            <template is="dom-repeat" items="{{messageList}}" as="message">
                <x-chat-list color="{{message.color}}" avatar="{{message.avatar}}" username="{{message.uuid}}" text="{{message.text}}" status="{{message.status}}" timestamp="{{message.timestamp}}"></x-chat-list>
            </template>
        </div>
        <div class="shim"></div>

        <div class="send-message layout horizontal">
            <paper-input class="flex" label="Type message..." id="input" value="{{input}}" on-keyup="checkKey"></paper-input>
            <paper-fab icon="send" id="sendButton" on-tap="sendMyMessage"></paper-fab>
        </div>
</div>
</paper-header-panel>
</paper-drawer-panel>

Answer 1

1.0中的字符串连接不像之前那样支持，尽管它在最后一次工作时听到了。

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#binding-to-text-content

您必须创建一个为您执行连接的方法，然后绑定到该方法。

示例：

<div class$="{{_colorClass(color)}}" style$="{{_backgroundImage(avatar)}}"></div>

<script>
  Polymer({
    _colorClass: function(color) {
      return 'middle avatar '+color;
    },
    _backgroundImage: function(avatar) {
      return 'background-image: url('+avatar+');';
    }
  });
</script>

Answer 2

在1.0中，您必须将绑定包含在没有空格的标记中，或者它是属性的完整且唯一的内容，即<div class="container-fluid" ng-controller="todoCtrl"> <section id="filters"> <h2>Filters</h2> <fieldset> Realestate type:<br> ApartmentBuy <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferApartmentBuy'" ng-false-value="" /><br> ApartmentRent <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferApartmentRent'" ng-false-value="" /><br> HouseBuy <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferHouseBuy'" ng-false-value="" /><br> HouseRent <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferHouseRent'" ng-false-value="" /><br> Industry <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferIndustry'" ng-false-value="" /><br> Office <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferOffice'" ng-false-value="" /><br> Store <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferStore'" ng-false-value="" /><br> ShortTermAccommodation<input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferShortTermAccommodation'" ng-false-value="" /><br> SpecialPurpose <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferSpecialPurpose'" ng-false-value="" /><br> Gastronomy <input type="checkbox" data-ng-model="search.renttype" data-ng-change="filterRealType()" ng-true-value="'OfferGastronomy'" ng-false-value="" /><br> </fieldset> </section> <h1 class="text-h3">Properties</h1> <div class="row gridalicious" data-toggle="gridalicious" data-width="200"> <div class="galcolumn" ng-repeat="todo in filteredTodos | cartypefilter:search" " id="item0GLe5r" style="width: 19.7354497354497%; padding-left: 15px; padding-bottom: 15px; float: left; box-sizing: border-box; height: 395px;"> <div class="panel panel-default relative"> <div class="ribbon-heading ribbon-default inline absolute left margin-none"> {{ todo.xsitype }} </div> <div class="cover hover overlay margin-none" > <img ng-src="{{ todo.titlePicture.urls[0].url[1].href }}" alt="location" class="img-responsive" /> <a href="#/listing/{{todo.id}}" class="overlay overlay-full overlay-bg-black overlay-hover"> <span class="v-center"> <span class="btn btn-circle btn-white"><i class="fa fa-eye"></i></span> </span> </a> </div> <div class="panel-body"> <h4 class="margin-v-0-5">{{ todo.title }}</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <span class="label label-grey-100">€{{ todo.price.value }}</span>  <a{% if angular %} ui-sref="{{ todo.externalId }}"{% else %} href="{{ todo.externalId}}"{% endif %} class="btn btn-primary btn-circle absolute bottom right"><i class="fa fa-shopping-cart"></i></a> </div> </div> </div> </div> <pagination boundary-links="true" max-size="10" items-per-page="itemsPerPage" total-items="todos.length" ng-model="currentPage" ng-change="pageChanged()"></pagination> </div>。

{{variable}}未解释

2 个答案: