Question

在我的项目中使用Aurelia Js和materializecss。在这里，我正在创建一个动态表单和动态选择框选项。问题是，materializecss仅在页面重新加载（ctrl + R）时起作用，如果，我去其他路由器并返回它不工作。似乎materializecss启动问题也尝试启动超时。代码如下：

型号：

attached(){ $('select').material_select(); $('.datepicker').pickadate({
selectMonths: true, 
selectYears: 15 
}); }
this.httpValueConverter.call_http('index/list','POST',{})
        .then(data => {
            if(data.meta && data.meta.statusCode == 200) {
                this.index_lists = data.index.list;
            }
        });

回复：

[{"id":1,"name":"HR doc","createdTime":"2016-10-03T09:50:37.000Z","updatedTime":null},{"id":2,"name":"pay slips","createdTime":"2016-10-03T10:11:36.000Z","updatedTime":null}]

Html：

<div class="input-field col s6 hr_doc">
               <select value.bind="scanupload.indexId" ref="select_box">
 <option repeat.for="index of index_lists"
                                value.bind="index.id">${index.name}</option>
                    </select>
                    <label>Index</label>

我想，对于这两个问题，它应该是相同的解决方案。帮助我。

Answer 1

创建自定义元素

正如法比奥所说，如果没有更多源代码或工作示例，很难诊断出来。在我看来，问题与时间和页面生命周期有关。典型的解决方案涉及创建自定义元素。

<强> materialSelectCustomElement.js

@inject(Element)
export class MaterialSelectCustomElement {

  @bindable items;

  constructor(element) {
    this.element = element;
  }

  attached() {
    $(this.element).material_select();
  }
}

<强> materialSelectCustomElement.html

<template>
  <select value.bind="scanupload.indexId" ref="select_box">
    <option repeat.for="index of index_lists" value.bind="index.id">${index.name}</option>
  </select>
  <label>Index</label>
</template>

然后，您可以在代码中将其用作自定义元素：

<强> app.html

<require from="materialSelectCustomElement"></require>
<material-select items.bind="selectableItems"></material-select>

这不是最好的例子，因为我对materialize-css语法不是很熟悉。但是，我已经写了一篇非常详细的博客，介绍了我喜欢你阅读的过程：http://davismj.me/blog/semantic-custom-element/

Aurelia js动态选择框和datepicker with materializecss

1 个答案:

创建自定义元素