Как использовать select2 как атрибут Aurelia?

Это не дубликат: aurelia-trying-to-load-html-from-select2 Как использовать select2 как атрибут Aurelia?

Я пытаюсь добавить Выбор2 выпадающий список с Aurelia 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

Не слишком знакомы с машинописными текстами, но похоже, что когда он устанавливает элемент в конструкторе, 'this.element' является строкой, и вы пытаетесь установить ее в Элемент. Конечно, вы, наверное, уже это знаете, и я не очень помог :) – Andrew

Это поможет узнать, какую установку вы используете, но исходя из последней ошибки, которую вы получаете, я предполагаю, что, как минимум, вам нужно прокомментировать строку в файле титров для углового транспортира. В моей настройке он находится на типе/globals/angle-protractor/index.d.ts строке 1839 объявляет var $: cssSelectorHelper. Мне нужно было прокомментировать это, чтобы не было конфликта с файлом jQuery .d.ts. Я также импортировал jquery как import 'jquery'; в моем файле атрибутов – peinearydevelopment

@peinearydevelopment спасибо за советы, которые взяли меня дальше, но все еще не удалось загрузить файл _css_, обновил вопрос. – MaYaN

На основании ошибки вы сообщаете, есть несколько вещей, которые вам нужно будет сделать. Файл index.d.ts для углового-транспортира вызывает конфликт имен с файлом .d.ts jQuery.

В 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 на Aurelia-Cli вокруг импорта CSS-файлов. Есть несколько решений о том, как включить файлы .css. Подход, который я принял, состоял в том, чтобы добавить <require from="select2/css/select2.min.css"></require> в файл app.ts.

источник

2016-09-02 17:44:44 peinearydevelopment

Как использовать select2 как атрибут Aurelia?

ответ

Смежные вопросы