sproutcore - 在sproutcore中单击按钮时添加文本字段

Question

如何在 sproutcore 中单击同一 View 中的按钮时在 View 中添加更多文本字段？

我有一个带有特定数量的文本字段的滑动 Pane 。单击按钮时，我需要在同一 View 中添加更多数量的文本字段。

或者，

我应该能够从选择按钮 View 中选择数字并在同一 View 中显示这些文本字段的数量。

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 并将其内容绑定(bind)到 Controller ，并创建 exampleView其内容绑定(bind)到 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" }));
    }
  })
});

现在，当您单击“添加文本字段”按钮时，它将向 Controller 数组添加一个新对象，该数组将自动使用新对象重新呈现 ListView ，从而重新呈现新文本字段。

几点注意事项:

这将 SC.ScrollView 与 SC.ListView 结合使用，您几乎总是希望这样做。

由于我们使用标准绑定(bind)(不是 SC.Binding.oneWay() )，编辑文本字段将自动更新 someProperty MyApp.myController 中对象的属性反之亦然:如果您通过其他方式更新值，则文本字段也应自动更新。

这不应该像使用 childViews 那样用于大型列表。 View 布局方法可能很慢。如果你需要性能，你应该改变 exampleView到覆盖 render() 的 View 方法并手动呈现文本输入并设置正确的更改事件和绑定(bind)。

最后，我不记得文本字段的 valueBinding 的正确语法是否正确。是 parentView.content.someProperty或 .parentView.content.someProperty (注意开头的句号)。如果第一种方法不起作用，请尝试添加 .看看这是否有效。