2013-10-29 77 views
3

我創建了一個typeahead視圖,我試圖發送一個動作給當前控制器來設置一個屬性。這裏是我的預輸入視圖ember.js從視圖向控制器發送動作

App.Typeahead = Ember.TextField.extend({ 
    dataset_name:  undefined, //The string used to identify the dataset. Used by typeahead.js to cache intelligently. 
    dataset_limit: 5, //The max number of suggestions from the dataset to display for a given query. Defaults to 5. 
    dataset_template: undefined, //The template used to render suggestions. Can be a string or a precompiled template. If not provided, suggestions will render as their value contained in a <p> element (i.e. <p>value</p>). 
    dataset_engine: undefined, //The template engine used to compile/render template if it is a string. Any engine can use used as long as it adheres to the expected API. Required if template is a string. 
    dataset_local: undefined, //An array of datums. 
    dataset_prefetch: undefined, //Can be a URL to a JSON file containing an array of datums or, if more configurability is needed, a prefetch options object. 
    dataset_remote: undefined, //Can be a URL to fetch suggestions from when the data provided by local and prefetch is insufficient or, if more configurability is needed, a remote options object. 
    ctrl_action:  undefined, 

    didInsertElement: function() { 
     this._super(); 

     var self = this; 
     Ember.run.schedule('actions', this, function() { 
      self.$().typeahead({ 
       name:  self.get('dataset_name'), 
       limit: self.get('dataset_limit'), 
       template: self.get('dataset_template'), 
       engine: self.get('dataset_engine'), 
       local: self.get('dataset_local'), 
       prefetch: self.get('dataset_prefetch'), 
       remote: self.get('dataset_remote') 

      }).on('typeahead:selected', function (ev, datum) { 
       self.selected(datum); 
      }); 
     }); 
    }, 

    willDestroyElement: function() { 
     this._super(); 

     this.$().typeahead('destroy'); 
    }, 

    selected: function(datum) { 

     this.get('controller').send(this.get('ctrl_action'), datum); 
    } 
}); 

這裏有一個實施

App.CompanyTA = App.Typeahead.extend({ 
    dataset_limit: 10, 
    dataset_engine: Hogan, 
    dataset_template: '<p><strong>{{value}}</strong> - {{year}}</p>', 
    dataset_prefetch: '../js/stubs/post_1960.json', 
    ctrl_action:  'setCompanyDatum', 

    selected: function (datum) { 

     this._super(datum); 
     this.set('value', datum.value); 
    } 
}); 

,這裏是我的控制器

App.PeopleNewController = Ember.ObjectController.extend({ 

    //content: Ember.Object.create(), 
    firstName: '', 
    lastName: '', 
    city: '', 
    state: '', 

    ta_datum: undefined, 

    actions: { 
     doneEditing: function() { 

      var firstName = this.get('firstName'); 
      if (!firstName.trim()) { return; } 

      var lastName = this.get('lastName'); 
      if (!lastName.trim()) { return; } 

      var city = this.get('city'); 
      if (!city.trim()) { return; } 

      var state = this.get('state'); 
      if (!state.trim()) { return; } 

      var test = this.get('ta_datum'); 

      // Create the new person model 
      var person = this.store.createRecord('person', { 
      firstName: firstName, 
      lastName: lastName, 
      city: city, 
      state: state 
      }); 

      // Clear the fields 
      this.set('firstName', ''); 
      this.set('lastName', ''); 
      this.set('city', ''); 
      this.set('state', ''); 

      // Save the new model 
      person.save(); 
     }, 

     setCompanyDatum: function(datum) { 

      this.set('ta_datum', datum); 
     } 
     } 
}); 

我期待的setCompanyDatum控制器動作被調用,但事實並非如此。其他一切都按預期工作。正在使用正確的操作名稱調用App.Typeahead.selected方法,但它實際上並未調用操作方法。

回答

4

您的App.Typeahead內的控制器指向App.Typeahead的實例,而不是您創建視圖的路由的控制器。

你應該只使用sendAction

http://emberjs.jsbin.com/EduDitE/2/edit

{{view App.Typeahead}} 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return ['red', 'yellow', 'blue']; 
    }, 

    actions:{ 
    externalAction:function(item){ 
    console.log('helllllo' + item); 
    } 
    } 
}); 

App.Typeahead = Ember.TextField.extend({ 
    internalAction: 'externalAction', 

    didInsertElement: function() { 
    this.sendAction('internalAction', " I'm a sent action"); 
    this._super(); 
    } 
}); 
+0

什麼控制器正在App.Typeahead內部使用? – David

+1

控制器項目只指向自己(視圖對象,App.Typeahead實例) – Kingpin2k

相關問題