javascript - Materialize CSS - Select ดูเหมือนไม่ปรากฏ

ตอนนี้ฉันกำลังทำงานกับ Materialize CSS และดูเหมือนว่าฉันจะติดปัญหากับฟิลด์เลือก

ฉันกำลังใช้ตัวอย่างที่ให้มาจากเว็บไซต์ของพวกเขา แต่โชคร้ายที่มันไม่แสดงผลในมุมมองเลย ฉันสงสัยว่ามีใครอีกคนสามารถช่วยได้ไหม

สิ่งที่ฉันกำลังพยายามทำคือสร้างแถวที่มีช่องว่างทั้งสองด้านเพื่อให้มี Padding - จากนั้นภายในสองรายการแถวด้านในควรมีช่องป้อนข้อความสำหรับค้นหาและเมนูดรอปดาวน์สำหรับการค้นหา

นี่คือตัวอย่างที่ฉันกำลังใช้งานจาก: http://materializecss.com/forms.html

ขอขอบคุณล่วงหน้า

นี่คือส่วนของโค้ดที่เป็นปัญหา

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>

คำตอบ #1

เนื่องจากพวกมันแทนที่ค่าปริยายของเบราว์เซอร์ การจัดรูปแบบ select จึงต้องใช้ Javascript ในการทำงาน คุณจำเป็นต้องรวมไฟล์ Javascript ของ Materialize และจากนั้นเรียกใช้

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

หลังจากที่คุณโหลดไฟล์นั้นแล้ว

คำตอบ #2

การออกแบบฟังก์ชัน select ใน materialize CSS เป็นความเห็นของฉันว่า เป็นเหตุผลที่ดีพอสมควรที่จะไม่ใช้มัน

คุณต้องเริ่มต้นองค์ประกอบ select ด้วย material_select() ตามที่ @littleguy23 กล่าว หากคุณไม่ทำ กล่องเลือกจะไม่แสดงเลย! ในแอป jQuery แบบเก่า ๆ ฉันสามารถเริ่มต้นมันในฟังก์ชัน document ready ลองเดาสิ ตอนนี้ทั้งฉันและคนอื่น ๆ หลายคนไม่ได้ใช้ jQuery แล้ว และเราก็ไม่ได้เริ่มต้นแอปของเราภายใน document ready hook ด้วย

การสร้าง select แบบไดนามิก จะเกิดอะไรขึ้นถ้าฉันสร้าง select แบบไดนามิก เช่น เกิดขึ้นในเฟรมเวิร์กอย่าง Ember ที่สร้าง views ขึ้นมาทันที? ฉันต้องเพิ่มตรรกะในแต่ละ view เพื่อเริ่มต้นกล่อง select ทุกครั้งที่มีการสร้าง view หรือเขียน view mixin เพื่อจัดการเรื่องนี้ให้ฉัน และมันยิ่งแย่กว่านั้น: เมื่อ view ถูกสร้างขึ้น และในแง่ของ Ember เมื่อ didInsertElement ถูกเรียก การเชื่อมโยงกับรายการตัวเลือกสำหรับกล่อง select อาจยังไม่ได้รับการแก้ไข ดังนั้นฉันจำเป็นต้องมีตรรกะพิเศษในการสังเกตรายการตัวเลือกเพื่อรอจนกว่าจะถูกเติมเต็มก่อนที่จะเรียก material_select หากตัวเลือกเปลี่ยนแปลง ตามที่อาจเกิดขึ้นได้ง่าย material_select จะไม่ทราบเรื่องนั้นและไม่อัปเดต dropdown ฉันสามารถเรียก material_select อีกครั้งเมื่อมีการเปลี่ยนแปลงตัวเลือก แต่ดูเหมือนว่ามันไม่เกิดผล (ถูกละเลย)

ในคำอื่น ๆ ดูเหมือนว่าการสมมติฐานการออกแบบเบื้องหลังกล่องเลือกของ Materialize CSS คือพวกมันทั้งหมดอยู่ที่หน้าโหลด และค่าของพวกมันไม่เคยเปลี่ยนแปลง

การใช้งาน จากมุมมองด้านความสวยงาม ผมก็ไม่ได้เห็นด้วยกับวิธีที่ Materialize CSS ใช้ในการสร้าง dropdown ซึ่งคือการสร้างชุดขององค์ประกอบแบบเงาแยกกันในที่อื่นของ DOM จริงอยู่ทางเลือกอื่นเช่น select2 ก็ทำแบบเดียวกัน และอาจไม่มีวิธีอื่นในการทำเอฟเฟกต์ทางสายตาบางอย่าง (จริงหรือ?) สำหรับผมแล้ว เมื่อผมตรวจสอบองค์ประกอบ ผมอยากเห็นองค์ประกอบนั้น ไม่ใช่เวอร์ชันเงาที่อยู่ที่อื่นซึ่งใครบางคนสร้างขึ้นมาอย่างวิเศษ

เมื่อ Ember ทำลายมุมมอง ฉันก็ไม่แน่ใจว่า materialize CSS จะทำลายองค์ประกอบเงาที่มันสร้างขึ้นหรือไม่ จริง ๆ แล้ว ฉันคงจะแปลกใจมากถ้ามันทำได้ ถ้าทฤษฎีของฉันถูกต้อง เมื่อมีการสร้างและทำลายมุมมองไปเรื่อย ๆ DOM ของคุณจะถูกปนเปื้อนด้วยชุดเมนูแบบเงาหลายชุดที่ไม่ได้เชื่อมต่อกับอะไรเลย เรื่องนี้ไม่ใช่เฉพาะกับ Ember แต่ยังใช้กับเฟรมเวิร์ก front-end OPA ที่ใช้ MVC/template อื่น ๆ ด้วย

การผูกค่า ฉันยังไม่สามารถหาวิธีที่จะให้ค่าที่เลือกในกล่องโต้ตอบผูกกลับไปยังสิ่งที่มีประโยชน์ใน framework อย่าง Ember ซึ่งเรียกใช้งานกล่องเลือกผ่านอินเทอร์เฟซแบบ {{view 'Ember.Select' value=country}} กล่าวคือ เมื่อมีการเลือกบางอย่าง country จะไม่ถูกอัปเดต ซึ่งนี่เป็นปัญหาใหญ่

คลื่น อ้อ ประเด็นเดียวกันนี้ก็ใช้กับเอฟเฟกต์ "คลื่น" บนปุ่มด้วย คุณต้องทำการเริ่มต้นทุกครั้งที่มีการสร้างปุ่มขึ้นมา ส่วนตัวผมไม่สนใจเอฟเฟกต์คลื่น และไม่เข้าใจว่าทำไมถึงมีเรื่องมากมายขนาดนี้ แต่ถ้าคุณต้องการคลื่น ให้ทราบว่าคุณจะใช้เวลาส่วนใหญ่ที่เหลือของชีวิตไปกับการกังวลเกี่ยวกับการเริ่มต้นปุ่มทุกปุ่มเมื่อมันถูกสร้างขึ้น

ฉันขอขอบคุณความพยายามของทีมงาน Materialize CSS และมีเอฟเฟกต์ภาพที่สวยงามอยู่บ้าง แต่ไฟล์มันใหญ่เกินไปและมีปัญหามากเกินไป เช่นที่กล่าวมา ทำให้ไม่ใช่สิ่งที่ฉันอยากใช้ตอนนี้ฉันวางแผนที่จะลบ Materialize CSS ออกจากแอปของฉันและกลับไปใช้ Bootstrap หรือเลเยอร์บน Suit CSS เครื่องมือของคุณควรทำให้ชีวิตคุณง่ายขึ้น ไม่ใช่ยากขึ้น

คำตอบ #3

นี่ใช้ได้ผลกับฉัน ไม่มี jquery หรือ select wrapper พร้อมคลาส input แค่ material.js และ js ธรรมชาติแบบนี้:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
});

อย่างที่คุณเห็น ฉันได้ใช้สไตล์ของ Materialize CSS จริง ๆ ไม่ใช่สไตล์เริ่มต้นของเบราว์เซอร์