Metamorphs vermasselt CSS in Ember.js Ansichten

Ich verwende Ember.js/Lenker durch eine Sammlung in einer Schleife und einige Elemente ausspucken, dass ich Bootstrap mag wie schön und ansprechend auf handhaben. Hier ist die Frage:Metamorphs vermasselt CSS in Ember.js Ansichten

Der Bootstrap-responsive CSS hat einige declrations darin mag:

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

und

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

Diese Regeln scheinen die ersten Kinder zu zielen. Wenn ich Schleife durch meine Sammlung in Lenkern mich um meine Artikel mit einem Bündel von Metamorph-Code am Ende:

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

Hier ist, was produziert wird:

<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>

So ist meine Frage: 1. Wie kann ich CSS sagen, Skript-Tags zu ignorieren? oder 2. Wie kann ich die css-Bindungen so bearbeiten, dass sie bei der Auswahl des ersten oder ersten untergeordneten Elements die Skript-Tags überspringen? oder 3. Wie kann ich das so strukturieren, dass Ember weniger/keine Metamorph-Tags verwendet? Hier

ist eine Geige: http://jsfiddle.net/skilesare/SgwsJ/

Quelle

2012-03-27 Austin Fatheree

Folgendes scheint das Problem zu beheben. Ember braucht einen Weg, um mich zu benachrichtigen, dass es meine Ansicht wiederhergestellt hat.GS.vZipPage.addObserver 'restaurantList', -> \t setTimeout -> \t \t $ ("# pZipPage"). Find ('. Row-fluid') .find ("div: first"). css ('margin-left', '0px') \t, 1 –

Dank auf Github @wagnet

den folgenden Doing half dem Metamorphlinge loszuwerden. Danke Peter!

Vorlage

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

Ansicht Klasse

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

Quelle

2012-03-27 14:35:08

können Sie die spezifischen Informationen von wagnet auf github Sie bekam verweisen? Es fällt mir schwer, dieser Antwort zu folgen und möchte diese Lösung als Alternative zu der anderen Antwort ausprobieren (was funktioniert). – steakchaser

Das war vor fast 2 Jahren und ich glaube nicht, dass Ember auch so mehr funktioniert. Der Unterschied bestand darin, dass ein Objekt der Sammlungsansicht verwendet wurde, um automatisch über die Sammlung zu iterieren und bevor ich manuell eine für jeden im Lenker ausführte. –

ich mit diesem Thema beschäftigt haben unter Verwendung der: first-of-Typselektor statt: first-Kind. Der einzige Nachteil ist, dass: First-of-Type weniger gut unterstützt wird (ich glaube, IE8 unterstützt: First-Kind, aber nicht: First-of-Type).

Quelle

2013-02-19 22:33:12 nycuser

Metamorphs vermasselt CSS in Ember.js Ansichten

Antwort

Verwandte Themen