1

スプラウトコアの同じビューでボタンをクリックすると、ビューにテキストフィールドを追加する方法は?

特定の数のテキストフィールドを持つスライド ペインがあります。ボタンをクリックすると、同じビューにさらに多くのテキスト フィールドを追加する必要があります。

または、

選択ボタン ビューから番号を選択し、それらの多数のテキスト フィールドを同じビューに表示できるようにする必要があります。

4

2 に答える 2

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を作成してそのコンテンツをコントローラーにバインドし、コンテンツが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" }));
    }
  })
});

ここで、[テキスト フィールドの追加] ボタンをクリックすると、コントローラ配列に新しいオブジェクトが追加され、リスト ビューが新しいオブジェクト、つまり新しいテキスト フィールドで自動的に再レン​​ダリングされます。

いくつかのメモ:

  1. これは、SC.ListView と組み合わせて SC.ScrollView を使用します。ほとんどの場合、この方法で行いたいと思うでしょう。

  2. 標準バインディング ( SC.Binding.oneWay()somePropertyではない) を使用しているため、テキスト フィールドを編集するとオブジェクトのプロパティが自動的に更新されMyApp.myController、その逆も同様です: 他の方法で値を更新すると、テキスト フィールドは自動的に更新されます。同じように。

  3. childViewsこれは、ビュー レイアウトの方法を使用すると遅くなる可能性があるため、大きなリストには使用しないでください。パフォーマンスが必要な場合は、 render()exampleViewメソッドをオーバーライドし、テキスト入力を手動でレンダリングして、適切な変更イベントとバインディングを設定するビューに変更する必要があります。

  4. valueBinding最後に、テキスト フィールドの適切な構文がparentView.content.somePropertyorであるかどうかを思い出せません.parentView.content.someProperty(先頭のピリオドに注意してください)。最初の方法が機能しない場合は、 を追加してみて、.機能するかどうかを確認してください。

于 2013-07-09T14:07:18.980 に答える