如何在EmberJS的表格中顯示逗號分隔列表？

好的，我有數組[ 「1卷，John」，「2，簡」，「3，扎克」]如何在EmberJS的表格中顯示逗號分隔列表？

目前它被顯示爲

我要顯示爲

如何到這個

我的代碼

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script> 
     <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script> 
     <script src="http://builds.emberjs.com/release/ember.debug.js"></script> 
     <script src="http://builds.emberjs.com/beta/ember-data.js"></script> 
    </head> 
    <body> 

     <script type="text/x-handlebars"> 
     {{outlet}} 
     </script> 


     <script type="text/x-handlebars" data-template-name="index"> 

     <table>  
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
      </tr> 
      <tr> 
       {{#each value in App.testData}} 
       <td>{{value}}</td> 
      {{/each}} 
      </tr> 
     </table> 

     </script> 

     <script type="text/javascript"> 
     var App = Ember.Application.create()   
     var someArray = [ { 
         'id':1, 
         'name':'john' 
        },{ 
         'id':2, 
         'name':'jane' 
        },{ 
         'id':3, 
         'name':'zack' 
        }]; 

     App.testData = someArray.map(function(el) 
        { 
         return el.id + ',' + el.name; 
        }); 
     </script> 
    </body> 
</html>

來源

2016-08-26 priyanka.sarkar

你使用這樣一箇舊版本的餘燼任何理由？如果這是爲了一個新項目，我強烈建議升級，並嘗試在模擬更新的Ember 2.x/Ember-CLI環境和佈局的ember twiddle（https://ember-twiddle.com）上重新創建您的問題。 ..你可能會得到更好的迴應。一般來說，你不想把事情打到全局應用變量那樣，這可能是你的問題....你的模板獲取定義在它自動生成的控制器/視圖中的值，其中不包括掛在應用程序上的所有東西。 –

使用someArray而不是testArray，如果您有默認testArray中您的應用程序，那麼你必須把它轉換爲someArray，並將其設置爲應用現在裏面each車把使用value.id和value.name

 <!DOCTYPE html> 
    <html> 
    <head> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> 
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script> 
     <script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script> 
     <script src="http://builds.emberjs.com/release/ember.debug.js"></script> 
     <script src="http://builds.emberjs.com/beta/ember-data.js"></script> 
    </head> 
    <body> 

     <script type="text/x-handlebars"> 
      {{outlet}} 
     </script> 


     <script type="text/x-handlebars" data-template-name="index"> 

     <table>  
       <tr> 
        <th>Id</th> 
        <th>Name</th> 
       </tr> 
       <tr> 
        {{#each value in App.someArray}} 
        <td>{{value.id}}</td> 
     <td>{{value.name}}</td> 
       {{/each}} 
       </tr> 
     </table> 

     </script> 

     <script type="text/javascript"> 
      var App = Ember.Application.create()  
      var testData = [ "1,john", "2,jane", "3,zack" ]; 
      App.someArray = testData.map(function(e){ 
          var [id,name] = e.split(","); 
          return { 
           id:id, 
           name:name 
          } 
          }) 
     </script> 
    </body> 
    </html>

來源

2016-08-26 19:24:33

我還有一個問題（可以請你幫忙）http://stackoverflow.com/questions/39176957/array-values-are-not-得到反射，同時，重新綁定功能於emberjs –

這應該很簡單，只需添加html標籤即可打破下一行。還要確保你用三個花括號包裝你的句柄屬性，以確保句柄知道你不僅傳遞了字符串，而且還傳遞了html標籤。請務必檢查本教程handlebars expressions進行更深入的細節.....我沒有測試過，但我希望你得到的圖片...

<script type="text/x-handlebars" data-template-name="index"> 

     <table> 
     <thead>  
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
      </tr> 
     </thread> 
     <tbody> 
      <tr> 
       {{#each value in App.testData}} 
       <tr>{{{value}}}</tr> 
       {{/each}} 
      </tr> 
     </tbody> 
     </table> 
     </script> 

     <script type="text/javascript"> 
     var App = Ember.Application.create()   
     var someArray = [ { 
         'id':1, 
         'name':'john' 
        },{ 
         'id':2, 
         'name':'jane' 
        },{ 
         'id':3, 
         'name':'zack' 
        }]; 

     App.testData = someArray.map(function(el) 
        { 
      return '<td>' + el.id + '</td>' + ',' + '<td>' + el.name + '</td>'; 
        }); 
     </script>

來源

2016-08-26 19:10:40

只是修改我的答案，我也測試了，讓我知道如果爲你工作 –

如何在EmberJS的表格中顯示逗號分隔列表？

回答

相關問題