Metamorphs Messing Up CSS in Ember.js Views

Sto usando Ember.js/handlebars per scorrere in loop una raccolta e sputare alcuni elementi che mi piacerebbe che bootstrap gestisse in modo piacevole e reattivo. Ecco il problema:Metamorphs Messing Up CSS in Ember.js Views

Il CSS bootstrap-reattiva ha alcuni declrations in esso, come:

.row-fluid > [class*="span"]:first-child { 
    margin-left: 0; 
}

.row-fluid:before, .row-fluid:after { 
    display: table; 
content: ""; 
}

Queste regole sembrano indirizzare i primi bambini. Quando ho collegare attraverso la mia collezione di manubri io alla fine con un mucchio di codice Metamorph in giro i miei articoli:

<div class="row-fluid"> 
      {{#each restaurantList}} 
       {{view GS.vHomePageRestList content=this class="span6"}} 
      {{/each}} 
</div>

Ecco ciò che viene prodotto:

<div class="row-fluid"> 
     <script id="metamorph-9-start" type="text/x-placeholder"></script> 
      <script id="metamorph-104-start" type="text/x-placeholder"></script> 
       <div id="ember2527" class="ember-view span6"> 
       My View 
       </div> 
      <script id="metamorph-104-end" type="text/x-placeholder"></script> 
      <script id="metamorph-105-start" type="text/x-placeholder"></script> 
       <div id="ember2574" class="ember-view span6"> 
       My View 2 
       </div> 
      <script id="metamorph-105-end" type="text/x-placeholder"></script> 
     <script id="metamorph-9-end" type="text/x-placeholder"></script> 
</div>

Quindi la mia domanda è questa: 1. Come posso dire al css di ignorare i tag script? o 2. Come posso modificare le associazioni css in modo che salgano sui tag script quando si seleziona il primo o il primo figlio? o 3. Come posso strutturare questo in modo che Ember usi meno/nessun tag metamorfosi?

Ecco un violino: http://jsfiddle.net/skilesare/SgwsJ/

fonte

2012-03-27 Austin Fatheree

Quanto segue sembra correggere il problema. Ember ha bisogno di un modo per me comunicare che è finito il mio rebinding view.GS.vZipPage.addObserver 'restaurantList', -> \t setTimeout -. 'Row-fluido'> \t \t $ ("# pZipPage") trovare () .find ("div: first"). css ('margin-left', '0px') \t, 1 –

Grazie alla @wagnet su github

Facendo seguito contribuito a sbarazzarsi dei Metamorphs. Grazie Peter!

Template

{{view Em.CollectionView itemViewClass="GS.vHomePageRestList" contentBinding="restaurantList" class="row-fluid"}}

Visualizzazione classi

GS.vHomePageRestList = Em.View.extend 
templateName: 'tHomePageRestList' 
classNames: ['span6']

fonte

2012-03-27 14:35:08

Puoi fare riferimento alle informazioni specifiche ottenute da wagnet su github? Avere difficoltà a seguire questa risposta e vorrebbe provare questa soluzione come alternativa all'altra risposta (che funziona). – steakchaser

Questo è stato quasi 2 anni fa e non credo che la Brace possa funzionare anche in questo modo. La differenza era che questo stava usando un oggetto vista collezione per iterare automaticamente sulla collezione e prima che stavo facendo manualmente uno per ciascuno nei manubri. –

Ho affrontato questo problema utilizzando il: first-of-type di selezione, invece di: first-child. L'unico inconveniente è che: il primo tipo è meno ben supportato (credo che IE8 supporti: first-child ma not: first-of-type).

fonte

2013-02-19 22:33:12 nycuser

Metamorphs Messing Up CSS in Ember.js Views

risposta

Problemi correlati