具有HTML输入范围的Ember.js组件未正确设置值

Question

我有一个简单的Ember组件，它只包含一个输入范围滑块，如下所示：

  RewriteEngine On
  RewriteCond %{HTTP_HOST} ^www\.example\.com$
  RewriteRule ^/?$ "http\:\/\/example\.com\/" [R=301,L]

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^([^\.]+)$ $1.php [NC,L,QSA]

  ErrorDocument 403 http://example.com/error.html
  ErrorDocument 404 http://example.com/error.html

  <IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
     BrowserMatch ^Mozilla/4 gzip-only-text/html
     BrowserMatch ^Mozilla/4\.0[678] no-gzip
     BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
     Header append Vary User-Agent
   </IfModule>

   ## EXPIRES CACHING ##
   <IfModule mod_expires.c>
     ExpiresActive On
     ExpiresByType image/jpg "access plus 1 year"
     ExpiresByType image/jpeg "access plus 1 year"
     ExpiresByType image/gif "access plus 1 year"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType application/pdf "access plus 1 month"
     ExpiresByType text/x-javascript "access plus 1 month"
     ExpiresByType application/x-shockwave-flash "access plus 1 month"
     ExpiresByType image/x-icon "access plus 1 year"
     ExpiresDefault "access plus 2 days"
    </IfModule>
   ## EXPIRES CACHING ##


  Options +FollowSymLinks
  RewriteEngine on
  RewriteRule example.php/(.*) example.php?p=$1

  Options +FollowSymLinks
  RewriteEngine on
  RewriteRule example.php/(.*) example.php?id=$1

当它最初渲染时，滑块的位置不会像您期望的那样设置到最终位置。它位于100左右。

Answer 1

解决方案是更改属性的顺序并在max：

之后设置值

<input
  type="range"
  value=500
  min=0
  max=500
>

通常在HTML中，属性的顺序无关紧要。然而，在这种情况下，Ember似乎将其​​转换为以下内容：

<input
  type="range"
  min=0
  max=500
  value=500
>

default max of an input is 100。在这种情况下，请设置＆＃39;值＆＃39;在设置＆＃39; max＆＃39;之前设置为500是无效的，所以它被设置为100。

参见讨论here。