如何在 sproutcore 中单击同一 View 中的按钮时在 View 中添加更多文本字段?
我有一个带有特定数量的文本字段的滑动 Pane 。单击按钮时,我需要在同一 View 中添加更多数量的文本字段。
或者,
我应该能够从选择按钮 View 中选择数字并在同一 View 中显示这些文本字段的数量。
最佳答案
我建议使用 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 ,从而重新呈现新文本字段。
几点注意事项:
someProperty
MyApp.myController
中对象的属性反之亦然:如果您通过其他方式更新值,则文本字段也应自动更新。 childViews
那样用于大型列表。 View 布局方法可能很慢。如果你需要性能,你应该改变 exampleView
到覆盖 render() 的 View 方法并手动呈现文本输入并设置正确的更改事件和绑定(bind)。 valueBinding
的正确语法是否正确。是 parentView.content.someProperty
或 .parentView.content.someProperty
(注意开头的句号)。如果第一种方法不起作用,请尝试添加 .
看看这是否有效。 关于sproutcore - 在sproutcore中单击按钮时添加文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17541569/