Добавить текстовое поле при нажатии кнопки в sproutcore

Question

Как добавить больше текстовых полей в представление при нажатии кнопки в том же представлении в sproutcore?

У меня есть скользящая панель с определенным количеством текстовых полей. При нажатии на кнопку мне нужно добавить больше номера текстового поля в том же виде.

Или же,

Я должен быть в состоянии выбрать число в представлении кнопки выбора и показать те много числовых текстовых полей в том же виде.

Answer 1

Я бы порекомендовал использовать SC.ListView для этой цели.

У вас должен быть SC.ArrayController, содержимое которого представляет собой массив, содержащий объекты, представляющие каждое текстовое поле. Это может быть так просто, как-то так:

MyApp.myController = SC.ArrayController.create({
  content: [
    SC.Object.create({ someProperty: "Text field value 1" }),
    SC.Object.create({ someProperty: "Text field value 2" }),
    SC.Object.create({ someProperty: "Text field value 3" })
  ]
});

Затем вы создадите свой SC.ListView и свяжете его содержимое с контроллером, а также создадите exampleView, содержимое которого связано с someProperty свойство объектов:

MyApp.MyView = SC.View.extend({
  childViews: 'scrollView addButtonView'.w(),

  scrollView: SC.ScrollView.extend({
    layout: { top: 0, left: 0, right: 0, bottom: 50 },

    contentView: SC.ListView.extend({
      contentBinding: 'MyApp.myController.arrangedObjects',

      rowHeight: 40,

      exampleView: SC.View.extend({
        childViews: 'textFieldView'.w(),

        textFieldView: SC.TextFieldView.extend({
          // Add a little margin so it looks nice
          layout: { left: 5, top: 5, right: 5, bottom: 5 },

          valueBinding: 'parentView.content.someProperty'
        })
      })
    })
  }),

  addButtonView: SC.ButtonView.extend({
    layout: { centerX: 0, bottom: 10, width: 125, height: 24 },

    title: "Add Text Field",

    // NOTE: The following really should be handled by a statechart
    // action; I have done it inline for simplicity.
    action: function() {
      MyApp.myController.pushObject(SC.Object.create({ value: "New Field" }));
    }
  })
});

Теперь, когда вы нажмете кнопку "Добавить текстовое поле", он добавит новый объект в массив контроллеров, который автоматически повторно отобразит представление списка с новым объектом и, следовательно, с новым текстовым полем.

Пара заметок:

1. При этом используется SC.ScrollView в сочетании с SC.ListView, вы почти всегда захотите сделать это таким образом.

2. Так как мы используем стандартные привязки (не SC.Binding.oneWay ()), редактирование текстовых полей автоматически обновит someProperty собственность на объекты в MyApp.myController и наоборот: если вы обновите значение каким-либо другим способом, текстовое поле также должно автоматически обновиться.

3. Это не должно использоваться для большого списка, как использование childViews Метод размещения макета может быть медленным. Если вам нужна производительность, вы должны изменить exampleView для представления, которое переопределяет метод render() и вручную визуализирует ввод текста и устанавливает надлежащие события изменения и привязки.

4. Наконец, я не могу вспомнить, правильный ли синтаксис для текстового поля valueBinding является parentView.content.someProperty или же .parentView.content.someProperty (обратите внимание на период в начале). Если первый способ не работает, попробуйте добавить . и посмотрим, работает ли это.

Answer 2

Как и Topher, я предполагаю, что вы используете SproutCore, а не Ember (ранее SC2).

Если вам нужно добавить произвольное дочернее представление в произвольное расположение вашего представления, вам нужен view.appendChild. В действии кнопки вы бы сделали что-то вроде этого:

this.get('parentView').appendChild(SC.View.create({ ... }))

Если вы пойдете по этому пути, вам придется самостоятельно определить макет нового вида. Если вам не нужно точно контролировать макет, тогда воспользуйтесь решением Topher - ListView сделает часть макета за вас.