sacar y anexar js a html

rascabuchitos · #1 (**permalink**) 18/09/2013, 21:32

hola amigos
tengo este codigo dentro del body

Código HTML:

Ver original<body>
  <div class='liveExample'> 
    
    <form data-bind="submit:addItem">
        Add item: <input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
        <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    </form>
     
    <p>Your values:</p>
    <select multiple="multiple" height="5" data-bind="options:allItems, selectedOptions:selectedItems"> </select>
     
    <div>
        <button data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>
        <button data-bind="click: sortItems, enable: allItems().length > 1">Sort</button>
    </div>
    
</div>
  
 
 
<script type='text/javascript'>//<![CDATA[ 
 
var BetterListModel = function () {
    this.itemToAdd = ko.observable("");
    this.allItems = ko.observableArray(["Fries", "Eggs Benedict", "Ham", "Cheese"]); // Initial items
    this.selectedItems = ko.observableArray(["Ham"]);                                // Initial selection
 
    this.addItem = function () {
        if ((this.itemToAdd() != "") && (this.allItems.indexOf(this.itemToAdd()) < 0)) // Prevent blanks and duplicates
            this.allItems.push(this.itemToAdd());
        this.itemToAdd(""); // Clear the text box
    };
 
    this.removeSelected = function () {
        this.allItems.removeAll(this.selectedItems());
        this.selectedItems([]); // Clear selection
    };
 
    this.sortItems = function() {
        this.allItems.sort();
    };
};
 
ko.applyBindings(new BetterListModel());
//]]>  
 
</script>
 
 
</body>

mi consulta es:
como puedo sacar el js en un archivo aparte y llamarlo por medio de src
sin que afecte el funcionamiento, ya que itemToAdd
es un termino comun dentro de los div como del script

gracias

abimaelrc · #2 (**permalink**) 19/09/2013, 14:39

Ya sabes hacerlo, acabas de decir como hacerlo. Solo es cuestión de copiar todo lo que está dentro de las etiquetas <script.....> </script> y colocarlo en un archivo js y luego añadir el src del archivo en las etiquetas script. Y en tu caso añadir ese archivo al final como lo haces porque se está ejecutando luego del formulario. A menos que lo quieras colocar dentro del evento window.onload para que se ejecute cuando haya cargado la página y puedas colocar la etiqueta script en el header que es donde debería estar.

rascabuchitos · #3 (**permalink**) 19/09/2013, 17:06

hola abimaelrc
me salio perfecto
la opcion del evento window.onload no es admisible :)

pero por simple curiosidad
es posible hacer lo mismo con todo lo que esta dentro del body?
me refiero al div en concreto... es decir jalarlo desde .css por medio de un src?
o al menos simplificarlo mas?

gracias

pzin · #4 (**permalink**) 20/09/2013, 01:06

No puedes poner código HTML en un archivo CSS. El HTML debe de ir donde está, no en otro lugar.

abimaelrc · #5 (**permalink**) 20/09/2013, 06:13

Solo debes colocar lo que corresponde en su lugar. Ejemplo, style en un archivo css, html lo dejas ahí en html, javascript en un archivo js. etc