Question

可能是一件非常简单的事，但我似乎无法找到答案。

我想替换<content>部分中的属性。但我不明白如何将title（包含内容hola）推送到<content>部分。

演示app.html

<dom-module id="demo-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <my-el>
      [[title]] or {{title}}
    </my-el>
  </template>
...

MY-el.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="my-el">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <content></content>
  </template>

  <script>
      Polymer({
        is: 'my-el',
        properties: {
          title: {
            type: String,
            value: 'hola',
          },
        }
      })
  </script>
</dom-module>

PS：
我99％肯定有一些我缺少的文件...欢迎任何链接:-P

Answer 1

如果<demo-app>拥有自己的title属性，并且<my-el>.title绑定到<dom-module id="demo-app"> <template> <my-el title="{{title}}"> [[title]] or {{title}} </my-el> ...，那么这在技术上是可行的：

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-el',
    properties: {
      title: {
        type: String,
        value: 'Hello world!',
        notify: true
      }
    }
  });
  
  Polymer({
    is: 'demo-app'
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <demo-app></demo-app>

  <dom-module id="demo-app">
    <template>
      <style>
        h1 {
          color: blue;
        }
      </style>
      <my-el title="{{title}}">
        <h1>[[title]]</h1>
      </my-el>
    </template>
  </dom-module>
  
  <dom-module id="my-el">
    <template>
      <content></content>
      <section>
        <input type="text" value="{{title::input}}">
      </section>
    </template>
  </dom-module>
</body>

// Push the page you want to go to on top of the stack.    
await NavigationPage.PushAsync(new CPage()));

// Remove page B from the stack, so when you want to go back next time 
//you will go to page A.   
Navigation.RemovePage(Navigation.NavigationStack[Navigation.NavigationStack.Count - 2] );

codepen

如何在Polymer内容元素中获取属性？

1 个答案: