ember.js从视图向控制器发送动作

时间:2013-10-29 01:01:10

标签: 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方法,但它实际上并不调用操作方法。

1 个答案:

答案 0 :(得分: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();
  }
});