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并将其内容绑定到控制器，并创建其内容绑定到对象的someProperty属性的exampleView：

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" }));
    }
  })
});

现在，当您单击“添加文本字段”按钮时，它将向控制器数组添加一个新对象，该对象将自动使用新对象重新呈现列表视图，因此，新文本字段。

几点说明：

这将SC.ScrollView与SC.ListView结合使用，您几乎总是希望这样做。
由于我们使用的是标准绑定（不是SC.Binding.oneWay()），因此编辑文本字段会自动更新someProperty中对象的MyApp.myController属性，反之亦然：如果您通过其他方式更新值，文本字段也应自动更新。
这不应该用于大型列表，因为使用childViews视图布局方法可能会很慢。如果您需要性能，则应将exampleView更改为覆盖render()方法的视图，并手动呈现文本输入并设置正确的更改事件和绑定。
最后，我不记得文本字段valueBinding的正确语法是parentView.content.someProperty还是.parentView.content.someProperty（注意开头的句号）。如果第一种方式不起作用，请尝试添加.并查看是否有效。

Answer 2

像Topher一样，我假设您使用的是SproutCore而不是Ember（以前的SC2）。

如果需要将任意子视图添加到视图中的任意位置，则需要view.appendChild。在按钮的操作中，您可以执行以下操作：

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

如果你走这条路，你必须自己弄清楚新视图的布局。如果您不需要精确控制布局，那么请使用Topher的解决方案 - ListView为您完成布局。

单击sproutcore中的按钮添加文本字段

2 个答案: