如何將select2用作Aurelia屬性？

這不是重複：aurelia-trying-to-load-html-from-select2 如何將select2用作Aurelia屬性？

我想一個選擇2下拉列表添加到奧裏利亞Contact Manager但我有得到它的工作的問題。

我aurelia.json外觀：

... 
{ 
    "name": "select2", 
    "path": "../node_modules/select2/dist", 
    "main": "js/select2", 
    "deps": ["jquery"], 
    "resources": [ 
    "css/select2.css" 
    ] 
} 
...

而且自定義屬性：

import {autoinject, customAttribute} from 'aurelia-framework'; 

import * as $ from 'jquery'; 
import 'select2'; 
import 'select2/css/select2.css!'; 

@customAttribute('select2') 
@autoinject 
export class SelectCustomAttribute { 
    element: Element; 

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

    attached(): void { 
     $(this.element) 
      .select2({ 
       placeholder: 'Select!' 
      }) 
      .on('change', e => { 
       if(e.originalEvent) { return; } 
      }); 
    } 

    detached(): void { 
     $(this.element).select2('destroy').off('change'); 
    } 
}

構建應用程序失敗：

[Error: ENOENT: no such file or directory, open 'C:\Users\MyApp\node_modules\select2\dist\css\select2.css.js']

卸下import 'select2/css/select2.css!';使得它編譯，但然後我會必須加載css手動無論我想利用這個屬性，它擊敗放在第一位具有屬性的目的：

<require from="select2/css/select2.css"></require> 
<section class="row container"> 
    <select select2> 
    <option>Mustard</option> 
    <option>Ketchup</option> 
    <option>Relish</option> 
    </select> 
</section>

來源

2016-09-01 MaYaN

不太熟悉typescript，但它看起來像是在構造函數中設置元素時，'this.element'是一個字符串，並且您試圖將其設置爲Element。當然，你可能已經知道這一點，但我真的沒有多大幫助:) – Andrew

這將有助於知道你使用的是什麼設置，但基於你得到的最後一個錯誤，我的猜測是，至少，你需要在角度量角器的類型文件中註釋一行。在我的設置中，它在typings/globals/angular-protractor/index.d.ts行1839聲明var $：cssSelectorHelper。我需要對此進行評論，以免與jquery .d.ts文件發生衝突。我也導入jquery作爲導入'jquery';在我的自定義屬性文件 – peinearydevelopment

@peinearydevelopment感謝提示，這使我進一步，但仍然無法加載_css_文件更新的問題。 – MaYaN

根據您所報告的錯誤

，有你需要做的幾件事情。角度量角器的index.d.ts文件導致與jQuery的.d.ts文件發生命名衝突。

在typings/globals/angular-protractor/index.d.ts註釋掉像1839（declare var $: cssSelectorHelper）。

將以下內容添加到aurelia.json文件中。

{ 
    "name": "select2", 
    "path": "../node_modules/select2/dist", 
    "main": "js/select2.min", 
    "resources": [ 
    "css/select2.min.css" 
    ] 
}

有上issue filed的奧裏利亞-CLI各地導入CSS文件。關於如何包含.css文件，有幾個解決方案。我採取的方法是將<require from="select2/css/select2.min.css"></require>添加到我的app.ts文件。

來源

2016-09-02 17:44:44 peinearydevelopment

如何將select2用作Aurelia屬性？

回答

相關問題