Ember js使用名稱爲URL slug

是否可以在URL中使用其他字段？我想使用這個名字，但是我首先應用到了LowCase（），這是我在特定對象中所做的。這是我的代碼。一切正常，但對象數據不會顯示在視圖中...任何想法？提前致謝！Ember js使用名稱爲URL slug

<body> 

<script type="text/x-handlebars"> 
    <div class="container"> 
     <div class="navbar navbar-inverse"> 
      <a class="navbar-brand" href="#">LayerSpark</a> 
      <ul class="nav navbar-nav"> 
       <li class="active">{{#linkTo 'categories'}}Categories{{/linkTo}}</li> 
       <li>{{#linkTo 'help'}}Help{{/linkTo}}</li> 
       <li>{{#linkTo 'account'}}Account{{/linkTo}}</li> 
      </ul> 
     </div> 
    </div> 
    <div class="container"> 
       {{outlet}} 

    </div> 

</script> 


<script type="text/x-handlebars" id="categories"> 

    <div {{bindAttr class=":row"}}> 
     <div {{bindAttr class=":col-lg-4"}}> 
      <ul> 
       {{#each model}} 
       <li>{{#linkTo 'category' slug}}{{name}}{{/linkTo}}</li> 
       {{/each}} 
      </ul> 

     </div> 
     <div {{bindAttr class=":col-lg-8"}}> 
      {{outlet}} 
     </div> 
    </div> 

</script> 

<script type="text/x-handlebars" id="category"> 
    Post:<br> 
    My name is :: {{ categories.name }}<br> 
    My id is :: {{id}}<br> 
    My slug is :: {{slug}}<br> 

</script> 

<script type="text/x-handlebars" id="categories/index"> 
    <p class="text-warning">Please select a Category</p> 
</script> 

<script type="text/x-handlebars" id="help"> 
    <p class="text-warning">Help me</p> 
</script> 

<script type="text/x-handlebars" id="account"> 
    <p class="text-warning">Your bank account is ...</p> 
</script>

app.js

App = Ember.Application.create({ 
    LOG_TRANSITIONS:true 
}); 
DS.RESTAdapter.configure("plurals", { 
    category: "categories" 
}); 
App.Store = DS.Store.extend({ 
    revision: 12, 
    adapter: DS.RESTAdapter.extend({ 
     url: '/api' 
    }) 
}); 

App.Router.map(function() { 
    this.resource('about'); 
    this.resource('categories', function() { 
     this.resource('category',{path:':category_slug'}); 
    }); 
    this.resource('help'); 
    this.resource('account'); 
}); 

App.CategoriesRoute = Ember.Route.extend({ 
    model: function() { 
     return App.Category.find(); 
    } 
}); 
App.CategoryRoute = Ember.Route.extend({ 
    setupController: function(controller, category) { 
     controller.set('model', category); 
    } 
}); 

var attr = DS.attr; 

App.Category = DS.Model.extend({ 
    name: attr('string'), 
    slug: function(){ 
     return this.get('name').toLowerCase(); 
    }.property('name') 
}); 


Ember.Handlebars.registerBoundHelper('markdown', function(input) { 
    return new Handlebars.SafeString(showdown.makeHtml(input)); 
}); 

Ember.Handlebars.registerBoundHelper('date', function(date) { 
    return moment(date).fromNow(); 
});

來源

2013-08-02 BrettAHale

你可以做的是掛接到serialize鉤子上CategoryRoute，並提供有蛞蝓。

例子：

App.CategoryRoute = Ember.Route.extend({ 
    setupController: function(controller, category) { 
    controller.set('model', category); 
    }, 
    serialize: function(model) { 
    return { 
     category_slug: model.get("name").toLowerCase() 
    }; 
    } 
});

這種方式，您還可以刪除你的模型中塞計算性能，並在你的鏈接，那麼你做的事：

{{#each model}} 
    {{#linkTo 'category' this}}{{name}}{{/linkTo}} 
{{/each}}

希望它能幫助。

來源

2013-08-02 07:00:01 intuitivepixel

謝謝！我實際上已經嘗試過，但在我的鏈接中，我使用的是「名稱」而不是「this」，因此它不起作用。 – BrettAHale

作爲後續問題，你知道爲什麼深度鏈接不起作用嗎？例如，如果我直接轉到/＃/ categories/name。該頁面爲空白。我需要控制器中的依賴嗎？ – BrettAHale

Ember js使用名稱爲URL slug

回答

相關問題