在點擊sproutcore中的按鈕時添加文本框

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

，當您單擊「添加文本字段」按鈕，它會增加一個新的對象控制器陣列的新對象，它會自動重新渲染列表視圖，因此，新的文本領域。

有兩點要注意：

1. 這與SC.ListView一起使用SC.ScrollView，你幾乎總是要這樣來做。

2. 由於我們使用的標準綁定（不SC.Binding.oneWay()），編輯文本字段將在MyApp.myController和副自動更新的對象someProperty屬性反之亦然：如果你通過一些其他手段更新值，文本字段應該自動更新。

3. 這不應該用於大型列表，因爲使用childViews方法的視圖佈局可能會很慢。如果需要性能，則應將exampleView更改爲覆蓋render()方法的視圖，並手動呈現文本輸入並設置適當的更改事件和綁定。

4. 最後，我不記得，如果在正確的語法，文本字段的valueBinding是parentView.content.someProperty或.parentView.content.someProperty（注意在開始的時間）。如果第一種方式不起作用，請嘗試添加.並查看是否有效。

Answer 2

贊同Topher我假設你使用SproutCore而不是Ember（以前稱爲SC2）。

如果您需要將任意子視圖添加到視圖上的任意位置，則需要view.appendChild。在按鈕的動作，你會做這樣的事情：

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

如果你走這條路，你就必須要弄清楚的佈局爲自己的新觀點。如果你不需要精確地控制佈局，那麼使用Topher的解決方案 - ListView爲你做佈局。