Question

我得到了以下内容。一切顺利。但{{keyword}}中的app/templates/search/results.hbs根本没有呈现......

任何指针？

// app/router.js
import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.resource('search', { path: '/search' }, function() {
    this.route('results', { path: ':keyword' });
  });
};

// app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    search: function(keyword) {
      this.transitionTo('search.results', keyword);
    }
  }
});

// app/routes/search/results.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return Ember.RSVP.hash({
      products: this.store.find('product', { name: params.keyword, status: 'available' })
    });
  }
});

// app/templates/application.hbs
<form {{action "search" keyword on="submit"}}>
  {{input type="text" value=keyword placeholder="search" class="search"}}
</form>

// app/templates/search/results.hbs
<h3>Searching "{{keyword}}"</h3>
{{product-list products=products action='addToCart' fromRoute='index'}}

Answer 1

关键字属性属于应用程序控制器，因为绑定在application.hbs模板中以使用results.hbs模板中的相同属性，您需要在控制器中为其提供绑定。

//results controller
import Ember from 'ember';
export default Ember.ObjectController.extend({
    needs: ['application'],
    keywords: Em.computed.alias('controllers.application.keyword')
});

Answer 2

除了@guleria之外，最好使用renderTemplate使用outlet将搜索视图渲染到应用程序模板中，这样所有搜索视图都将由单个控制器管理

// app/routes/search/results.js
import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    search: function(keyword) {
      this.transitionTo('search.results', keyword);
    }
  },
  setupController: function (controller) {
    var params = this.paramsFor(this.routeName);
    controller.set('keyword', params.keyword);
  },
  renderTemplate: function (controller, model) {
    this._super(controller, model);
    this.render('searchbar', {
      into: 'application',
      controller: controller,
      outlet: 'searchbar'
    });
  },
  model: function(params) {
    return Ember.RSVP.hash({
      products: this.store.find('product', { name: params.keyword, status: 'available' })
    });
  }
});

// app/templates/searchbar.hbs. Note: after the render it will be controlled by searchController
<form {{action "search" keyword on="submit"}}>
  {{input type="text" value=keyword placeholder="search" class="search"}}
</form>

// app/templates/search/results.hbs
<h3>Searching "{{keyword}}"</h3>
{{product-list products=products action='addToCart' fromRoute='index'}}


// app/templates/application.hbs
{{outlet 'searchbar'}}
{{outlet}} {{! in our example this will be the outlet of the search view}}

Answer 3

简单地说，这会做你期望的事情

App.SearchResults = Ember.Route.extend({
  model: function(params) {
    return Ember.RSVP.hash({
      products: this.store.find('product', { name: params.keyword, status: 'available' }),
      keyword : params.keyword
    });
  }
});

DEMO

为什么没有呈现关键字？

3 个答案: