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

回答

相关问题