この記事では、ブートストラップを組み合わせて、製品の追加、削除、変更など、製品リストを管理するための比較的完全なアプリケーションを作成します。
必要な引用
<script type = 'text/javascript' src = 'http://www.see-source.com/js/knockout-2.2.0.js'> </script> <スクリプトタイプ= 'text/javascript' src = 'http://www.see-source.com/js/jquery-1.6.6.2.min. href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "styleSheet">
HTMLコード
<body> <! - 動的に製品リストを生成する - > <table> <thead> <tr> <th> id </th> <th>製品名</th> <th>元の価格</th> <th>プロモーション価格</th> <th>操作</th> </tr> </thead> <tbody data-bind = " </td> <td> <入力タイプ= "テキスト" data-bind = "value:$ data.name"/> </td> <td> <入力タイプ= "Text" data-bind = "value:$ data.price"/> </td> <td> <入力タイプ= "テキスト"データバインド= " data-bind = "click:$ root.update"/>> <input type = "button" value = "delete" delete "daty-bind =" click:$ root.remove "/> </td> </tbody> </table> <! - form data-bind =" submit:$ root.create "> legend> <culdge </leavers> </leaver> </leavers <div> <入力タイプ= "テキスト" name = "name"> </div> </div> <div> <label for = "input01">元の価格</label> <div> <入力タイプ= "Text" name = "rice"> div> </div> </div> <div> <div> <div> type = "submit"> save </button> <butth>キャンセル</button> </div> </fieldset> </form> </body>
JSコード
<script type = "text/javascript"> function productsviewmodel(){var baseuri = 'http:// localhost:8080/knockout/'; var self = this; //self.products = ko.observablearray([{'id': '111'、 'name': 'lenovo k900'、 'frice': '3299'、 'actualcost': '3000'}、{'id': '222'、 'name': '' ferity '' '4850'、 '4850'、 'htc; self.products = ko.observablearray(); $ .getJson(baseuri + "list"、self.products); // load ruction list // add rudce crodce self.create = function(formelement){$ .post(baseuri + "add"、$(formelement).serialize()、function(data){if(datassuccess){(datassuccess){// {} newProduct.name.name.value; } //製品の変更self.update = function(crowt){$ .post(baseuri + "update"、crowt、function(data){if(data.success){alert( "resultify");}}、 "json"); } //製品のself.remove = function(product){$ .post(baseuri + "delete"、 "productid =" + product.id、function(data){if(data.success){//サーバー側の削除が成功したとき、self.products.remove(product);}}、 "json"); }}}} ko.ApplyBindings(new ProductsViewModel()); </script>それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。