Question

我想询问是否有一步一步的方法来使用或配置Aurelia的materializecss。我目前能够运行我的Aurelia应用程序，直到我的index.html看起来像这样的教程：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <link href="jspm_packages/github/dogfalo/materialize@0.97.0/dist/css/materialize.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <title></title>
</head>
<body aurelia-app>
   <script src="jspm_packages/system.js"></script>
   <script src="config.js"></script>
   <script>
      System.import('aurelia-bootstrapper');
   </script>
</body>
</html>

我目前正在使用ASP .NET 5 Preview空模板和jspm来安装Aurelia。我已使用jspm install github:dogfalo/materialize安装了materializecss并从this link复制了一些html代码，以测试它是否有效。

此代码进入我的app.html文件

<template>
<ul class="collapsible" data-collapsible="accordion">
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
</ul>
</template>

虽然我的app.html文件已将其用于测试

export class App {
    constructor() {
       this.message = 'test app';
    }
}

我的package.json目前包含这些

{
 "jspm": {
   "directories": {
   "baseURL": "wwwroot"
 },
 "dependencies": {
   "aurelia-bootstrapper": "github:aurelia/bootstrapper@^0.16.0",
   "aurelia-framework": "github:aurelia/framework@^0.15.0",
   "dogfalo/materialize": "github:dogfalo/materialize@^0.97.0"
 },
 "devDependencies": {
   "babel": "npm:babel-core@^5.8.22",
   "babel-runtime": "npm:babel-runtime@^5.8.20",
   "core-js": "npm:core-js@^1.1.0"
  }
 }
}

当我浏览Chrome中的index.html文件时，我可以看到格式良好的可折叠文件，但是当我点击任何标题时，正文将无法展开。似乎没有引用js文件或jspm没有正确配置js文件。

Answer 1

你几乎就在那里 - 物化库有一个javascript组件，可以启用一些功能。在可折叠组件的文档中有这样的：

初始化

如果动态添加可折叠元素，则只需初始化。您也可以在初始化中传入选项，但这也可以在HTML标记中完成。

$(document).ready(function(){
    $('.collapsible').collapsible({
      accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
    });
  });

这些说明对静态页面很有用，但对像您这样的单页应用程序没有帮助。您无法使用$(document).ready，因为当该事件触发时，该组件不在页面上。

使组件工作最简单的方法是为视图模型提供对可折叠元素的引用，然后在其上调用$(element).collapsible()。这是怎么做的......

首先，将ref属性添加到ul：

<template>
<ul ref="myElement" class="collapsible" data-collapsible="accordion">
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
</ul>
</template>

接下来，在元素附加到DOM时初始化可折叠：

export class App {
    constructor() {
       this.message = 'test app';
    }
    attached() {
       $(this.myElement).collapsible();
    }
}

最后，确保通过将以下行添加到app.js来加载materializecss jquery组件：

import materialize from 'dogfalo/materialize';

如果你处理很多观点或元素，所有这些都会变得乏味，所以你需要将这个逻辑包装在aurelia custom attribute中以使事情变得更方便：

import {inject} from 'aurelia-framework';

@inject(Element)
export class CollapsibleCustomAttribute {
  constructor(element) {
    this.element = element;
  }

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

现在您只需将collapsible属性添加到元素中，它就会自动初始化materializecss的行为。

Answer 2

由于我只想要materializecss的一些特定功能，我通过将materialize文件复制到我的样式文件夹stlye / scss，style / js style / font中来实现。结构就像

private void ShowDialogWithHeader(String header) {
    final Dialog dialog = new Dialog(getActivity());
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.view_show_register_dialog);
    popapListview = (ListView) dialog.findViewById(R.id.registerPopapList);
    final EditText searchCountry = (EditText) dialog.findViewById(R.id.dialog_Search_Country);
    final TextView headerTxt = (TextView) dialog.findViewById(R.id.register_popap_header_txt);

    if (cashBanks != null) {
        bankList = Arrays.asList(cashBanks);
        bankNameAdapter = new BankNameAdapter(getActivity(), R.layout.spinner_category_adapter, bankList);
        popapListview.setAdapter(bankNameAdapter);
    }


    headerTxt.setText(header);


    popapListview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {


            Bank bank = bankList.get(position);
            mSelectedBank = bank;

            mBank.setText(bank.getBank());
            mBankCode.setText(bank.getBankcode());
            dialog.dismiss();


        }


    });
    searchCountry.addTextChangedListener(new TextWatcher() {
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            System.out.println("Text [" + s + "]");

            bankNameAdapter.getFilter().filter(s.toString());


        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                                      int after) {
        }

        @Override
        public void afterTextChanged(Editable s) {
        }
    });



    dialog.show();
}

在我的index.html中，我只加载我真正想要的那些js文件。

src/
    index.html
    config.js
    app/
        app.js
        …
    style/
        font/
        js/
        images/
        scss/

在我的主要scss文件中，我还只包括我真正需要的样式文件。您也可以使用<script> System.import('aurelia-bootstrapper'); System.import('jquery').then(function() { window.Materialize = {}; System.import('style/js/forms'); System.import('style/js/waves'); System.import('style/js/jquery.easing.1.3'); System.import('style/js/velocity.min'); System.import('style/js/hammer.min').then(function() { System.import('style/js/jquery.hammer'); }); }); </script>进行安装，然后使用jspm install github:dogfalo/materialize

将其加载到index.html中

希望你能帮助你找到自己的方式：）

使用materializecss和aurelia

2 个答案:

初始化