2016-07-22 8 views
0

したがって、私は http://ember.guru/2014/master-your-modals-in-ember-js の命令に従って、再利用可能なモーダルを作成しています。私はGUIの周りの様々な場所で簡単な編集に使用される拡張可能なモーダルを作成しようとしています。コンポーネントと歩留りブロックの同じオブジェクト

私は接触して渡すリンクから、このアクションを呼び出すテンプレートで

showModal: function(name, model) { 
    this.render(name, { 
    into: 'application', 
    outlet: 'modal', 
    model: model 
    }); 
} 

持ってapplication.jsで

<a class="contact-edit" {{action 'showModal' 'contact-edit' contact}}>Edit contact</a> 

接触-edit.hbs:

{{#my-modal objectEditing=model as |theObject|}} 
    <input type="text" name="phone" value="{{theObject.phone}}"> 
{{/my-modal}} 

my-modal.hbs:

<div class="modal-body"> 
    {{yield objectEditing}} 
</div> 

私-modal.js

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    actions: { 
    save: function() { 
     this.$('.modal').modal('hide'); 
     this.sendAction('save', this.get('objectEditing')); 
    }, 
    }, 
    show: function() { 
    this.$('.modal').modal().on('hidden.bs.modal', function() { 
     this.sendAction('close'); 
    }.bind(this)); 
    }.on('didInsertElement') 
}); 

問題はライン<input type="text" name="phone" value="{{theObject.phone}}">でtheObjectへの編集は(ルート上にある)、ここで呼び出されるアクションに表示されないです。私は間違って何をしていますか?

+1

ちょうどあなたに教えてください、ちょっと古いチュートリアルです。アウトレットとコンポーネントだけがないモーダルについては、[ember-wormhole](https://github.com/yapplabs/ember-wormhole)のチェックアウトを検討することをおすすめします。 – Lux

答えて

0

あなたの入力には、あなたの値を更新するアクションを渡す必要があります。値は、それ自体で自動的に更新されません。valueは、上記の属性を二重引用符で囲まれていないことを

{{#my-modal objectEditing=model as |theObject|}} 
    <input 
    type="text" 
    name="phone" 
    value={{theObject.phone}} 
    oninput={{action (mut theObject.phone) value="target.value"}} 
    > 
{{/my-modal}} 

注意。 :)

+0

Arghhh!あなたの時間を無駄にして申し訳ありません:私は{{input}}ヘルパーを使用するのを忘れました。私はそれが降伏と何か関係があったと確信して、明らかに見えませんでした:) – dashambles

関連する問題