เป็นเรื่องยากที่จะติดตามวิวัฒนาการของ Ember JS เมื่อใกล้เข้ามา (และถึง!) เวอร์ชัน 1.0.0 บทช่วยสอนและเอกสารต่างๆมีมาเรื่อย ๆ ทำให้เกิดความสับสนมากมายเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดและเจตนาของนักพัฒนาซอฟต์แวร์ดั้งเดิม
คำถามของฉันคืออะไรคือแนวทางปฏิบัติที่ดีที่สุดสำหรับ Ember JS มีบทช่วยสอนที่อัปเดตหรือตัวอย่างการทำงานที่แสดงให้เห็นว่า Ember JS ตั้งใจจะใช้หรือไม่ ตัวอย่างโค้ดจะดีมาก!
ขอบคุณทุกคนโดยเฉพาะ Ember JS devs!
คำตอบ:
มีโครงการสำคัญที่นักพัฒนา Ember.js ทั้งมือใหม่และมือเก๋าควรใช้ประโยชน์จาก:
แม้ว่าจะต้องการระดับความสะดวกสบายในบรรทัดคำสั่ง แต่คุณสามารถสร้างโครงการ Ember ที่ทันสมัยพร้อมแนวทางปฏิบัติที่ดีที่สุดที่แนะนำโดยชุมชนได้ในเวลาไม่กี่วินาที
แม้ว่าจะเป็นประโยชน์ในการตั้งค่าโครงการ Ember.js ในวิธีที่ยากเช่นเดียวกับคำตอบของ Mike Grassotti แต่คุณไม่ควรทำเช่นนั้นสำหรับรหัสการผลิต โดยเฉพาะอย่างยิ่งเมื่อเราได้เช่นที่มีประสิทธิภาพและง่ายต่อการใช้งานโครงการเช่นEmber-CLIการแสดงให้เราเห็นฮุดะได้รับการอนุมัติเส้นทางความสุข
คู่มือการเริ่มต้นฉบับย่อนี้จะช่วยให้คุณได้รับจากศูนย์ไปเป็นมากกว่าศูนย์เล็กน้อยในสองสามนาที เมื่อทำเสร็จแล้วคุณควรรู้สึกค่อนข้างมั่นใจว่า ember.js ใช้งานได้จริงและหวังว่าจะมีความสนใจมากพอที่จะเรียนรู้เพิ่มเติม
คำเตือน: อย่าเพิ่งลองใช้คำแนะนำนี้แล้วคิดว่าถ่านดูดทำให้เกิด "ฉันสามารถเขียนคู่มือการเริ่มต้นฉบับย่อนั้นได้ดีกว่าใน jQuery หรือ Fortran" หรืออะไรก็ตาม ฉันไม่ได้พยายามขายคุณด้วยถ่านไฟหรืออะไรก็ตามคู่มือนี้เป็นเพียงแค่สวัสดีชาวโลกเท่านั้น
jsFiddle นี้มีรหัสทั้งหมดจากคำตอบนี้
Ember.js ต้องการทั้ง jQuery และ Handlebars ต้องแน่ใจว่าไลบรารีเหล่านั้นโหลดก่อน ember.js:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>โดยค่าเริ่มต้น ember จะแทนที่เนื้อหาของหน้า html ของคุณโดยใช้เนื้อหาของเทมเพลต handlbars อย่างน้อยหนึ่งรายการ สักวันเทมเพลตเหล่านี้จะอยู่ในไฟล์. hbs ที่แยกจากกันซึ่งประกอบโดย sprockets หรืออาจจะเป็น grunt.js ตอนนี้เราจะเก็บทุกอย่างไว้ในไฟล์เดียวและใช้แท็กสคริปต์
ขั้นแรกให้เพิ่มapplicationเทมเพลตเดียว:
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
</div>
</script>เพียงเพิ่มบล็อกสคริปต์อื่นApp = Ember.Application.create({});เพื่อโหลด ember.js และเริ่มต้นแอปพลิเคชันของคุณ
<script type='text/javascript'>
App = Ember.Application.create({});
</script>นั่นคือทั้งหมดที่คุณต้องสร้างแอปพลิเคชันถ่านไฟฉายพื้นฐาน แต่ก็ไม่น่าสนใจมากนัก
Ember ประเมินแต่ละเทมเพลตของแฮนด์บาร์ในบริบทของคอนโทรลเลอร์ ดังนั้นแม่แบบมีการจับคู่application ApplicationControllerEmber สร้างขึ้นโดยอัตโนมัติหากคุณไม่ได้กำหนด แต่ที่นี่เรามาปรับแต่งเพื่อเพิ่มคุณสมบัติข้อความ
<script type='text/javascript'>
App.ApplicationController = Ember.Controller.extend({
message: 'This is the application template'
});
</script>เราเตอร์ Ember ทำให้ง่ายต่อการรวมเทมเพลต / คอนโทรลเลอร์เข้ากับแอปพลิเคชัน
<script type='text/javascript'>
App.Router.map(function() {
this.route("index", { path: "/" });
this.route("list", { path: "/list" });
});
App.IndexController = Ember.Controller.extend({
message: 'Hello! See how index.hbs is evaluated in the context of IndexController'
});
App.ListRoute = Ember.Route.extend({
setupController: function(controller) {
controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
}
});
</script>ในการทำงานนี้เราปรับเปลี่ยนเทมเพลตแอปพลิเคชันของเราโดยการเพิ่มตัว{{outlet}}ช่วย เราเตอร์ Ember จะแสดงเทมเพลตที่เหมาะสมในเต้าเสียบขึ้นอยู่กับเส้นทางของผู้ใช้ นอกจากนี้เราจะใช้ตัว{{linkTo}}ช่วยเพื่อเพิ่มลิงก์การนำทาง
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<h1>Ember.js is easy?<small> Minimum Viable Ember.js QuickStart Guide</small></h1>
<p>{{message}}</p>
<div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
{{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
</div>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="list">
<h3 class="demo-panel-title">This is the list template</h3>
<ul>
{{#each item in content}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3 class="demo-panel-title">This is the index template</h3>
<p>{{message}}</p>
</script>ตัวอย่างการทำงานของโปรแกรมนี้สามารถใช้ได้ที่นี่
คุณสามารถใช้jsFiddle นี้เป็นจุดเริ่มต้นสำหรับแอพถ่านของคุณเอง
สำหรับการอ้างอิงคำตอบเดิมของฉัน:
คำถามของฉันมีไว้สำหรับผู้เชี่ยวชาญ Ember.js และแน่นอนว่าเป็นผู้เขียนบทช่วยสอนที่เกี่ยวข้อง: ฉันควรใช้รูปแบบการออกแบบจากบทช่วยสอนหนึ่งเมื่อใดและจากที่อื่นเมื่อใด
แบบฝึกหัดทั้งสองนี้แสดงถึงแนวทางปฏิบัติที่ดีที่สุดในขณะที่เขียน แน่นอนว่ามีบางสิ่งที่สามารถเรียนรู้ได้จากแต่ละสิ่งทั้งสองอย่างน่าเศร้าที่จะล้าสมัยเพราะ ember.js กำลังดำเนินไปอย่างรวดเร็ว จากทั้งสองอย่าง Trek เป็นปัจจุบันมากกว่า
ส่วนประกอบใดของแต่ละส่วนคือความชอบส่วนตัวและส่วนประกอบใดบ้างที่จะพิสูจน์ได้ว่าจำเป็นเมื่อแอปของฉันเติบโตเต็มที่ หากคุณกำลังพัฒนาแอปพลิเคชัน ember ใหม่ฉันไม่แนะนำให้ทำตามแนวทาง Code Lab มันล้าสมัยเกินไปที่จะเป็นประโยชน์
ในการออกแบบของ Code Lab ดูเหมือนว่า Ember จะใกล้เคียงกับที่มีอยู่ในแอปพลิเคชันมากขึ้น (แม้ว่าจะเป็น JS ที่กำหนดเอง 100% ก็ตาม) ในขณะที่แอปพลิเคชันของ Trek ดูเหมือนจะอยู่ใน Ember มากขึ้น
ความคิดเห็นของคุณกำลังปัง CodeLab ใช้ประโยชน์จากส่วนประกอบหลักของถ่านและเข้าถึงจากขอบเขตทั่วโลก ตอนที่เขียน (9 เดือนที่แล้ว) สิ่งนี้เป็นเรื่องธรรมดา แต่ปัจจุบันแนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนแอปพลิเคชัน ember นั้นใกล้เคียงกับสิ่งที่ Trek กำลังทำอยู่มาก
ที่กล่าวว่าแม้แต่บทแนะนำของ Trek ก็ล้าสมัย คอมโพเนนต์ที่จำเป็นApplicationViewและApplicationControllerตอนนี้สร้างขึ้นโดยเฟรมเวิร์กเอง
แหล่งข้อมูลที่เป็นปัจจุบันที่สุดคือชุดคู่มือที่เผยแพร่ที่http://emberjs.com/guides/ ซึ่งได้รับการเขียนขึ้นตั้งแต่ต้นในช่วงสองสามสัปดาห์ที่ผ่านมาและสะท้อนให้เห็นถึงถ่านรุ่นล่าสุด (ก่อนเผยแพร่)
ฉันยังตรวจสอบโครงการ wip ของ Trek ได้ที่นี่: https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences
แก้ไข :
@ sly7_7: ฉันจะยกตัวอย่างอื่น ๆ โดยใช้ ember-data https://github.com/dgeb/ember_data_example
มี screencast สด 30 นาทีโดย @tomdale: https://www.youtube.com/watch?v=Ga99hMi7wfY
ฉันขอแนะนำให้ใช้Yeomanและเครื่องกำเนิดถ่านที่มาพร้อมกับมัน คุณจะได้รับเครื่องมือทั้งหมดที่จำเป็นในการพัฒนาทดสอบและเตรียมแอปสำหรับการผลิตนอกกรอบ ในฐานะโบนัสเพิ่มเติมคุณจะสามารถแยกเทมเพลตมุมมองของคุณออกเป็นหลายไฟล์และเริ่มต้นด้วยโครงสร้างไดเร็กทอรีอัจฉริยะที่จะอำนวยความสะดวกให้คุณในการสร้าง codebase ที่ดูแลรักษาได้
ฉันได้เขียนบทแนะนำเกี่ยวกับการเริ่มต้นใช้งานในเวลาประมาณ 5 นาที เพียงติดตั้ง node.js แล้วทำตามที่นี่
The Fire Up Ember - Peepcode screencast คุ้มค่ากับการเฝ้าดู
อ่านบทช่วยสอนฟรีที่ชื่อว่าLet's Learn Emberจาก Tuts + Premium ฟรีเพราะมาจากfree coursesซีรีส์ของพวกเขา หลักสูตรนี้ตามที่พวก Tuts เรียกว่าแบ่งออกเป็นบทที่ง่ายต่อการปฏิบัติตามสิบสี่บท
ฉันหวังว่านี่จะช่วยได้.
ความนับถือ,
ฉันชอบวิธีการแบบถ่าน มันให้ของมากมายนอกกรอบ ได้แก่ :
และอื่น ๆ.
และติดตั้งง่ายสุด ๆ เพียงเรียกใช้yo charcoalเพื่อสร้างแอปจากนั้นyo charcoal:module myModuleเพิ่มโมดูลใหม่
ข้อมูลเพิ่มเติมที่นี่: https://github.com/thomasboyt/charcoal
ฉันเพิ่งสร้าง Starter Kit หากคุณต้องการใช้ EmberJS ล่าสุดกับ Ember-Data พร้อมเอ็นจิ้นเทมเพลต Emblem ทั้งหมดอยู่ใน Middleman ดังนั้นคุณสามารถพัฒนาด้วย CoffeeScript ทุกอย่างบน GitHub ของฉัน: http://goo.gl/a7kz6y
แม้ว่าFlame ที่ล้าสมัยใน Ember.js จะยังคงเป็นแบบฝึกหัดที่ดีสำหรับผู้ที่มองหาถ่านเป็นครั้งแรก
ฉันได้เริ่มสร้างชุดวิดีโอที่เริ่มตั้งแต่ก่อน Ember และต่อยอดไปสู่การใช้ Ember ด้วยความโกรธในกรณีการใช้งานที่ร้ายแรงสำหรับสิ่งต่างๆในโลกแห่งความจริง
หากคุณสนใจที่จะเห็นสิ่งนี้เป็นที่นิยมในแต่ละวัน (ฉันยินดีเป็นอย่างยิ่งที่จะเผยแพร่สู่สาธารณะหากมีความสนใจในที่สุด) คุณควรไปที่โพสต์ที่ฉันสร้างขึ้นและกด "like" (หรือแสดงความคิดเห็นที่นี่ ฉันคิดว่า):
ฉันกระตือรือร้นอย่างยิ่งที่จะช่วยให้ชุมชนเจริญรุ่งเรือง แต่ยังช่วยให้ผู้คนเรียนรู้วิธีสร้างเว็บไซต์มาตรฐานด้วยวิธีง่ายๆ