この記事では、ブートストラップを組み合わせて、製品の追加、削除、変更など、製品リストを管理するための比較的完全なアプリケーションを作成します。
必要な引用
<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をもっとサポートすることを願っています。