标签: web-component

是否可以动态地将纸张复选框[已检查|未检查]的状态(属性)绑定到纸张输入元素内的[readonly | disabled]属性？这是我到目前为止的实现:

<template repeat="{{item in lphasen}}">
  <div center horizontal layout>
    <paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
      <div style="margin-left: 24px;" flex>
        <h4>{{item.name}}</h4>
      </div>
      <div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
  </div>
</template>

行为应如下所示:当用户取消选中纸张复选框时,同一行中的纸张输入元素应禁用和/或只读,反之亦然.是否可以直接使用双胡子绑定多个元素,或者我必须以某种方式迭代DOM以手动设置纸张输入元素的属性？如果是,有人可以解释一下吗？

我几天前开始玩聚合物,到目前为止我理解它很好,但刚才我遇到了一个问题.我试图更改默认宽度,但我无法获得所需的结果.首先,我尝试仅使用这些更改来更改css中的宽度:

  #navheader {
      background-color: #56BA89;
  }
  core-drawer-panel .transition > #main{
      left:100px!important;
  }

  core-drawer-panel .transition > #drawer{
      width:100px!important;
  }

  core-drawer-panel .narrow-layout > #drawer:not(.core-selected){
      width:100px!important;
  }

这是html部分:

<core-scaffold>

  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One"></core-item>
      <core-item label="Two"></core-item>
      <core-item label="Three"></core-item>
      <core-item label="Four"></core-item>
      <core-item label="Five"></core-item>
      <core-item label="Six"></core-item>
      <core-item label="Seven"></core-item>

    </core-menu>
  </core-header-panel>

  <span tool>Title</span>

  <div class="content">
      If drawer is hidden, press button to display drawer.
  </div>
</core-scaffold>

它不想在没有!important的情况下覆盖默认样式.这就是我得到的:http://screencast.com/t/7AQHblQvk它看起来很好,直到它崩溃,像这样:http://screencast.com/t/oDg3ptLpp.然后我尝试更改core-drawer-panel.html内部的默认宽度,所以我修改了这部分代码:

/**
 * Width of the drawer …

现在core-toolbar有一个indent类将右侧的标题缩进60px,而材料设计规定边距应该实际上80px(事实上​​,数字60从未在整个文档中显示).

所以我可以轻松地编辑它,bower_components/core-toolbar/core-toolbar.css但问题是,一旦我将项目移动到其他地方,我必须在完成我的bower安装等后进行相同的编辑.

请注意,如果我core-toolbar要说延伸,我会遇到问题core-header-panel......因为它会寻找任何一个<core-toolbar>或类似的东西,"core-header"这有点烦人,但它是我可以忍受的东西.

做这样的事情最好的方法是什么？

在这些年里,我们看到了多种处理Web开发的技术,例如:

同构反应:

它提供了在客户端和服务器之间共享的公共代码库.

网页组件:

Polymer.js显示了为浏览器创建本机元素的方法.

这两种技术都是相反的方向.网络开发人员应该遵循哪一项？欢迎任何建议/意见.

在聚合物元素内动态创建html导入

有谁知道如何动态地将html导入添加到聚合物元素(版本1.0)？

下面的代码似乎没有用,并抱怨... HTML element <link> is ignored in shadow tree.

有没有人知道这方面或知道更好的方法？

<!-- here is where the created import could go -->

<dom-module id="my-component">

<!-- here is where I'd ideally like the import to be created -->

  <template>
    <div id="container">

      <!--This is where my dynamically loaded element should be placed-->

    </div>
  </template>

  <script>
    Polymer({is:'my-component',
      attached: function(){

        var importElem = document.createElement('link');
        importElem.rel = 'import';
        importElem.href = '/components/my-dynamic-sub-component.html';
        this.root.appendChild(importElem);
        var app = document.createElement('my-dynamic-sub-component');
        this.$.container.appendChild(app);

      }
    });
  </script>

</dom-module>

在Polymer元素中存储私有状态属性的推荐做法是什么？例如,仅对内部渲染有意义的属性(例如,一些布尔标志指示元素的哪些部分被渲染,或者临时数组是从dom-repeat可以迭代的对象构建的).它们并不意味着通过元素的API公开,仅供内部使用.

我到目前为止所做的是声明可以通过properties对象中的元素API使用的属性,而"私有"属性已经设置在ready和其他函数(例如this._tempArray = [])中,而没有明确地声明它们properties.我不知道这是不是一个好主意？

<dom-module id="test">
  <template>
    <style>

    </style>

    <template is="dom-if" if="[[_isDataReady]]">

    </template>

  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'test',

        properties: {
          dataUrl: {
            type: String
          }
        },

        ready: function() {
          this._isDataReady = false;
          this._tempArray = [];

          // Get data asynchronously from dataUrl
          // ...
        }
      });
    })();
  </script>
</dom-module>

我刚刚开始将我的Angular 1.x指令转换为Angular 2组件,但我首先陷入困境.我有2个指令,即row-field和column-field.它们可以用来创建自举12单位网格;

<row-field>
    <column-field span="4">First Cell</column-field>
    <column-field span="2" offset="1">Second Cell</column-field>
    <column-field span="4">Third Cell</column-field>
</row-field>

这将输出如下的html;

<div class="row">
    <div class="span4">First Cell</div>
    <div class="span2 offset1">Second Cell</div>
    <div class="span4">Third Cell</div>
</div>

在Angular 1.x中使用tranclude和replace属性指令相当容易.但是我在Angular 2中创建相同的行为时遇到了麻烦.我的列字段组件是这样的;

@Component({
    selector: 'column-field',
    template: '<ng-content [ngClass]="'span{{span}} offset{{offset}}'"></ng-content>',
    directives: [NgClass]
})
export class ColumnFieldComponent {
    @Input() span;
    @Input() offset;
}

但它没有创建所需的html输出.输出中总是有一个列字段标记,我想要的是用div标记替换column-field标记并将其属性移动到这个新的div标记.

任何建议将被认真考虑.

任何人都知道我们在Web组件设计中遇到的常见设计问题.我已经开始使用Vuejs/ReactJS和Angular 2,但我面临的最常见问题是组件之间的通信.我想与其他动态组件交谈,并将一些数据传递给它,期待数据的回报.

就像我有一个重复的项目列表和所有项目,我必须打开一个选项选择菜单(可重复使用).我想在选择一个选项时也回复一个回调.您可以想到驻留在#app元素下的常见Modal或Popover.

不知何故,我使用PubSub模式实现了这一点,但不认为使用它是个好主意.请建议是否有人对此有任何更好的了解.

我正在尝试构建一个将承载ace编辑器的Web组件.问题是我没有找到有关如何导入模块和设置类型的足够信息.下面的代码使用简单的<script>标签和全局变量工作得很好.

到目前为止,这就是我所拥有的:

npm install ace-code-editor --save
npm install @types/ace --save-dev

代码editor.cmp.ts

// Error: [ts] File '.../node_modules/@types/ace/index.d.ts' is not a module.
import * as ace from 'ace';

export class CodeEditorCmp extends HTMLElement {

    // DOM
    private editor: AceAjax;  // How do I import the type. What type to use?

    constructor() {
        super();
    }

    connectedCallback() {
        this.initCodeEditor();
    }

    initCodeEditor(){

        this.editor = ace.edit("editor-vsc");

        // How do I import the editor themes?
        this.editor.setTheme("ace/theme/xcode"); 

        // How do I import the editor modes?
        var …

我试图使用选择器设置width和height在WebComponent中:host,但大小不会改变.以下是组件的模板:

<template>
  <style>
    :host {
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
    }
  </style>

  <h1>Content</h1>
</template>

我需要做的是添加div一个容器并设置它的大小

<template>
  <style>
    div {
       width: 100px;
       height: 100px;
       background-color: rebeccapurple;
    }
  </style>

  <div>
    <h1>Content</h1>
  </div>
</template>

我想明白为什么这是不可能的以及它的原因.或者,如果有更好的方法来解决这个问题.

这是它的一个JSBin:http://jsbin.com/gesovagapi/edit？html,css,js,output