Ember js使用URL slug的名称

时间:2013-08-02 05:58:44

标签: ember.js ember-data

是否可以在网址中使用其他字段?我想使用该名称,但我首先应用toLowerCase(),我正在特定对象中执行。这是我的代码。一切正常,但对象数据没有出现在视图中...任何想法?提前谢谢!

<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();
});

1 个答案:

答案 0 :(得分:1)

你可以做的是挂钩serialize的{​​{1}}钩子并在那里提供slu ..

示例:

CategoryRoute

这样您就可以删除模型中的slug computed属性,然后在链接中删除:

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

希望它有所帮助。