Este artigo combina o Bootstrap para criar um aplicativo relativamente completo para gerenciar listas de produtos, incluindo adição de produto, exclusão e modificação.
Citações necessárias
<script type = 'text/javascript' src = 'http: //www.see-source.com/js/knockout-2.2.0.js'> </script> <script type = 'text/javaScript' src = 'http: //www.iMee-source.jscript'.JScript'> href = "http://www.see-source.com/bootstrap/css/bootstrap.css" rel = "Stylesheet">
Código HTML
<Body> <!-Gere dinamicamente a lista de produtos-> <table> <Thead> <tr> <th> id </th> <th> nome </th> <th> preço original </th> <th> Preço de promoção </th> <th> operação </th> </tr> </thead> <tbody-bind = "para os produtos:" </td> <td> <input type = "text" data-bind = "value: $ data.name"/> </td> <td> <input type = "text" data-bind = "value: $ data.price"/> </td> <td> <input type = "text" thata-bind = "value: $ data.actualctualCost" value = "modificar" data-bind = "clique: $ root.update"/> <input type = "button" value = "excluir" data-bind = "clique: $ root.remove"/> </td> </tbody> </tabela> <!-Adicionar formulário-> <formulário bind = "submit: $ root.create"> <field> <fields> <! para = "input01"> nome do produto </elabel> <div> <input type = "text" name = "name"> </div> </div> <div> <etiqueta para = "input01"> preço original </celt> <div> <input type = "text" name = "price"> </div> </div> <d> <d> <put type = "text" = "price"> </div> </div> <d> <d> name = "realCost"> </div> </div> <div> <button type = "submit"> salvar </butut> <butão> cancelar </button> </div> </sicieldset> </morm> </body>
Código JS
<script type = "text/javascript"> function ProductsViewModel () {var Baseuri = 'http: // localhost: 8080/knockout/'; var self = this; //self.products = ko.observableArray ([{'id': '111', 'nome': 'Lenovo K900', 'Price': '3299', 'RealCost': '3000'}, {'id': '222,' Name ':' Htc One ',' Price '' '', '40': '40; self.products = ko.observableArray (); $ .getjson (baseuri + "list", self.products); // carrega a lista de produtos // adicione o produto self.create = function (formElement) {$ .post (baseuri + "add", $ (formElement) .Serialize (), function (dados) {if (data.success) {/ quando o servidor-side () é o servidor (dados) {if (data.success) {/ quando o servidor-systring (data) {sinout). {}; } // modifique o produto self.update = function (produto) {$ .post (baseuri + "update", produto, function (data) {if (data.success) {alert ("modificar com sucesso");}}, "json"); } // Exclua o produto self.remove = function (produto) {$ .post (baseuri + "delete", "productId =" + product.id, function (dados) {if (data.success) {// Quando a deleção do servidor é bem-sucedida, self.products.remove (produto);}} ". }}}} ko.applybindings (new ProductsViewModel ()); </sCript>Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.