Question

Ember noob在这里。我基本上试图为多个参数提供多个输入字段。当用户键入字段时，会向PHP脚本发送请求，该脚本返回相关的JSON并显示它。

Ember 1.6.1（最新版本是一个痛苦的学习，因为所有的文档都是已过期）
Handlebars 1.3.0
jQuery 1.11.1

这是迄今为止的代码（不适用于多个代码）。

的index.html

  <script type="text/x-handlebars" data-template-name="search">
    {{view App.SearchTextField elementId="bedrooms" valueBinding=bedrooms upKeyAction="searchProperties" placeholder="Bedrooms"}}
    {{view App.SearchTextField elementId="suburb" valueBinding=suburb upKeyAction="searchProperties" placeholder="Sydney"}}

    {{outlet}}
  </script>      

  <script type="text/x-handlebars" data-template-name="search/results">
    {{#each}}
      <h1>{{bedrooms}} - {{street}} {{suburb}}</h1>
    {{/each}}
  </script>

apps.js

App = Ember.Application.create();

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

App.SearchRoute = Ember.Route.extend({
  actions: {
    searchProperties: function(suburb, bedrooms) {
        console.log(suburb);
      this.transitionTo('search.results', suburb, bedrooms);
    }
  }
});

App.SearchResultsRoute = Ember.Route.extend({
  model: function(params) {
      return Ember.$.getJSON('../test/data.php?suburb='+params.suburb+'&bedrooms='+params.bedrooms);
  }
});

App.SearchTextField = Ember.TextField.extend({
  keyUp: function (e) {
      if (e.target.id == 'bedrooms') {
          var bedrooms = e.target.value;
      } else if (e.target.id == 'suburb') {
          var suburb = e.target.value;
      }
      console.log(suburb + bedrooms);
      this.sendAction('action', suburb, bedrooms);
  }
});

经过一些游戏后，我使用它来工作（看起来比Ember更多jQuery，但是嘿它有效）

App = Ember.Application.create();

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

App.SearchRoute = Ember.Route.extend({
  actions: {
    searchProperties: function(data) {
      this.transitionTo('search.results', data.suburb, data.bedrooms);
    }
  }
});

App.SearchResultsRoute = Ember.Route.extend({
  model: function(params) {
      return Ember.$.getJSON('../test/data.php?suburb='+params.suburb+'&bedrooms='+params.bedrooms);
  }
});

App.SearchTextField = Ember.TextField.extend({
  keyUp: function (e) {
      var data = {suburb:$('#suburb').val(), bedrooms:$('#bedrooms').val()};
      this.sendAction('upKeyAction', data);
  }
});

有更好的方法吗？

Answer 1

你有点过于复杂化IMO，

我更愿意观察控制器中的值变化并采取相应措施。导致代码大大减少，实际上您实际上正在利用框架提供的功能。

示例实施，可能需要修改以满足您的需求

App.SearchController = Ember.ObjectController.extend({
  suburb : null,
  bedrooms : null,

  doSearch : function(){
    var model = [{street: this.get('suburb'), bedrooms: this.get('bedrooms')}];
    //var model = Ember.$.getJSON('../test/data.php?suburb='+this.get('suburb')+'&bedrooms='+this.get('bedrooms'));
    this.transitionToRoute('search.results', model);
  }.observes('suburb', 'bedrooms')
});

App.SearchRoute = Ember.Route.extend({
});

App.SearchResultsRoute = Ember.Route.extend({
});

App.SearchTextField = Ember.TextField.extend({});

FIDDLE

Ember json搜索多个TextFields

1 个答案: