2012-04-07 21 views
6

¿Cómo puedo vincular un nuevo elemento create después de que la página se haya cargado?¿Cómo puedo unir elementos nuevos usando knockout?

que tienen algo como esto

system = function() 
{ 

    this.hello = function() 
    { 
     alert("hello"); 
    } 

    this.makeUI = function(container) 
    { 
     div = document.createElement("div"); 
     div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    } 
} 

ko.applyBindings(new system); 

Si trato de este

this.makeUI = function(container) 
{ 
    div = document.createElement("div"); 
    div.innerHTML = "<button data-bind='click: hello'>Click</button>"; 
    ko.applyBindings(new system,div); 
}  

pero según theseposts que no va a funcionar.

Respuesta

11

El objetivo con el knockout es llamar a los knockouts una sola vez en un conjunto de elementos dom. Por lo tanto, si llama a applyBindings repetidamente en todo el documento, tendrá problemas con enlaces múltiples.

Existen algunos casos en los que se justifica invocar applyBindings varias veces, y esto es en el caso de vistas parciales que no estaban en el dominio en el momento del primer enlace y por lo tanto no estaban vinculadas. Puede vincular estos al determinar de forma selectiva el alcance de applyBindings a ese elemento dom.

Aquí hay un ejemplo de lo que estaba tratando de lograr. Tu problema fue que no estabas insertando el nodo que creaste.

http://jsfiddle.net/madcapnmckay/qSqJv/

No recomendaría este enfoque para este ejemplo en particular, hay una manera mejor.

Si desea crear din elementos de forma dinámica y tenerlos vinculados por knockout, el enfoque más común es utilizar la funcionalidad de creación de plantillas integrada que se encarga de insertar los elementos y enlazar cualquier atributo de enlace de datos que encuentre.

lo tanto, si desea crear una serie de botones podría hacer su

this.makeUI = function(container) 
{ 
    self.buttons.push({ 
     text: "button " + self.buttons().length, 
     handler: this.hello 
    }); 
} 

He aquí un violín.

http://jsfiddle.net/madcapnmckay/ACjvs/

Espero que esto ayude.

+1

He probado el violín anterior con su solución, pero ya no funciona. ¿Alguna idea? – guido

+2

El enlace knockout.js en jsfiddles ya no funciona. Los actualicé para apuntar a un espejo CDN. Tratar; http://jsfiddle.net/ACjvs/75/ http://jsfiddle.net/qSqJv/84/ – MrTrick

Cuestiones relacionadas