2014-10-28 1 views
1

Я хочу отредактировать строки таблицы, поэтому для этого при щелчке я хочу сделать столбцы текстовыми полями так что я могу редактировать и сохранять.Как добавить динамическую строку в таблицу нажатием кнопки и сделать существующие строки доступными для редактирования с помощью Ember

Также, как добавить строки динамически при нажатии кнопки добавления. Я знаю, как это сделать с помощью jQuery, но не знаю, в ember.

Спасибо!

Я хочу подражать этому типу поведения в Ember.

http://jsbin.com/codeso/1/edit?html,js,output У этого jsbin есть стол и кнопка. При нажатии кнопки динамическая строка добавляется в таблицу со столбцами в виде текстовых полей, чтобы пользователь мог вводить данные, которые при нажатии другой кнопки можно сохранить.

+0

Что вы пробовали? Посмотрите на документацию по электронным направляющим. –

+0

Добро пожаловать в Ember :) Проводите время на гида ember, как предложил @HasibMahmud. Посмотрите видео здесь http://emberjs.com/guides/. Пожалуйста, приложите немного усилий и предоставьте jsbin своей работой, если у вас есть какие-либо сомнения. – Susai

+0

@HasibMahmud Я не уверен, как добавить динамические строки с помощью Ember. Я могу предварительно заполнить таблицу данными модели. Я добавил JSBin, чтобы показать, какое поведение мне нужно. Позвольте мне знать, что я должен сделать, чтобы достичь этого! – Stuarty

ответ

1

Я полагаю, что ваша таблица привязана к модели ArrayController.

<table> 
... 
{{#each element in model}} 
    <tr> 
     <td>{{element.name}}</td> 
     ... 
    </tr> 
{{/each}} 
... 

В контроллере добавить действие

// inside controller 
actions: { 
    addElement: function() { 
     var elements = this.get('model'), // model contains the data/list for the rows 
      newElement = /* here your object creation code */; 

     elements.pushObject(newElement); 
    } 

} 

Затем в шаблоне Рули

<button {{action "addElement"}}>Add row</button> 
+0

Большое спасибо! Но я не могу добавить объект в контроллер, мне нужно взять вход для этого объекта только с Пользовательского интерфейса, в пользовательском интерфейсе. Можете ли вы посмотреть на этот JSBin. Я хочу подражать этому поведению. Я тоже обновил этот вопрос. http://jsbin.com/codeso/1/edit?html,js,output – Stuarty

0

Я работаю над этим же самое в настоящее время. Моя идея состоит в том, чтобы иметь строку со входами перед блоком {#each} и сделать ее видимой, когда пользователь захочет добавить строку. Эта строка будет отменена (просто сделайте строку невидимой) и сохраните кнопки. Только тогда, когда пользователь сохраняет, это что-то вроде вызванного вызовом splattne's addElement().

Таким образом, мне не нужно пытаться добавлять разметку строк и форм динамически, что на самом деле является только HTML/Javascript, а действие Ember - только тогда, когда данные действительно должны быть добавлены в бэкэнд.

Смежные вопросы