Emberjs を探索して簡単な Todo アプリケーションを作成する_JavaScript のヒント

目標
Emberjs を使用して簡単な Todo アプリケーションを作成し、次の効果を実現します。 テキスト ボックスにテキストを入力して ToDo 項目を作成します。To Do 項目に優先順位を付けたり、完了した項目を作成したりできます。削除される。

準備
このアプリケーションを完了するには、いくつかの準備をする必要があります。
1. 現時点ではスタイルに関係なく、HTML ページを作成します。スクリプト: emberjs、ハンドルバー、jQuery。これら 3 つのスクリプトはオンラインで入手できるので、head タグに追加します。


制作 ページを作成し、スクリプトを追加して、アプリケーションの作成を開始します。 HTML コードは次のとおりです:

コードをコピー コードは次のとおりです:

<script> <br><br>/******************** <br>application <br>********************/ <br><br>window.App = Ember.Application.create( <br>{ <br>ready :function(){ <br>Em.Logger.info('Welcome to the To-Do App'); <br>} <br>} <br>); <br><br>/******************** <br>model <br>******************** / <br><br>App.TodoModel = Em.Object.extend({ <br>status:'', <br>value:'', <br>title:function(){ <br>return '[' this.get('status') ']' this.get('value'); <br>}.property('status','value') <br>}); <br><br>/** ****************** <br>view <br>********************/ <br>App.AddItemView = Ember.TextField.extend({ <br>placeholder:'Enter to-do item', <br>elementId:'add', <br>insertNewline:function(){ <br>var item = App.TodoModel.create({ <br>status:App.selectController.get('selected'), <br>value:this.get('value') <br>}); <br> App.todoStore.pushObject(item); <br>this.set('value',''); <br>} <br>}); <br><br>App.ListView = Ember.CollectionView.extend( { <br>contentBinding:'App.todoStore', <br>tagName:'ul', <br>itemViewClass: Ember.View.extend({ <br>templateName:'itemTemplate', <br>removeItem:function() {this.getPath( 'contentView.content' ).removeObject(this.get( 'content' ));}, <br>mouseEnter:function(){this.set('hover',true);}, <br>mouseLeave:function(){this.set('hover',false);} <br>}) <br>}); <br><br><br><br>/******************** <br>controls <br>*****************/ <br>App.todoStore = Ember.ArrayController.create({ <br>content:[] <br>}); <br><br>App.selectController = Ember.Object.create({ <br>selected:' Low', <br>content:['High','Medium','Low'] <br>}); <br><br></script>

< ;body>

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル