1

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

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

或者，

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

4

2 回答 2

0

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

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

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

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

于 2013-07-09T17:11:51.357 回答
0

为此，我建议使用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（注意开头的句点）。如果第一种方法不起作用，请尝试添加.并查看是否有效。

于 2013-07-09T14:07:18.980 回答