sproutcore에서 버튼을 클릭하면 텍스트 필드를 추가합니다

sproutcore에서 같은보기의 버튼을 클릭하면 뷰에 텍스트 필드를 추가하는 방법은 무엇입니까?sproutcore에서 버튼을 클릭하면 텍스트 필드를 추가합니다

특정 텍스트 필드가있는 슬라이딩 창이 있습니다. 버튼을 클릭하면 동일한보기에 더 많은 텍스트 필드를 추가해야합니다.

또는

나는 선택 버튼보기에서 번호를 선택하고 같은보기에서 텍스트 필드의 그 많은 수를 표시 할 수 있어야한다.

출처

2013-07-09 Anna

Ember (이전에 SproutCore 2라고 부르기도 전에 SproutCore 2 프로젝트라고 부름)가 아니라 SproutCore입니다. –

나는이 목적으로 을 사용하는 것이 좋습니다.

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

이제, 당신은 "추가 텍스트 필드"버튼을 클릭하면 자동으로 따라서 새 개체로 목록보기를 다시 렌더링됩니다 컨트롤러 배열, 새 텍스트에 새 개체를 추가합니다 들.

노트의 몇 :이 SC.ListView와 연계하여 SC.ScrollView를 사용

, 당신은 거의 항상 이런 식으로하고 싶은 것입니다.
우리가 자동으로 MyApp.myController 그 반대의 개체에 someProperty 속성을 업데이트 할 텍스트 필드를 편집, 표준 바인딩 (안 SC.Binding.oneWay())를 사용하고 있기 때문에 반대 : 당신이 다른 수단을 통해 값을 업데이트하는 경우, 텍스트 필드가 자동으로해야 업데이트도.
childViews보기 레이아웃 방법을 사용하면 속도가 느려질 수 있으므로 큰 목록에는 사용하면 안됩니다. 성능이 필요한 경우 메서드를 무시하고 수동으로 텍스트 입력을 렌더링하고 적절한 변경 이벤트 및 바인딩을 설정하는보기로 exampleView을 변경해야합니다.
마지막으로, 내가 기억할 수없는 경우에 대한 적절한 구문 텍스트 필드의 valueBinding가 parentView.content.someProperty 또는 .parentView.content.someProperty (시작 부분에서 기간을 통지)입니다. 첫 번째 방법으로 문제가 해결되지 않으면 .을 추가하고 문제가 없는지 확인해보십시오.

출처

2013-07-09 14:07:18

토퍼처럼 Ember (이전 SC2)가 아닌 SproutCore를 사용하고 있다고 가정합니다.

보기의 임의의 위치에 임의의 하위보기를 추가해야하는 경우 view.appendChild가 필요합니다. 버튼의 행동에, 당신은 같은 것을 할 것입니다 :

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

이 경로를 이동하는 경우, 새 뷰 자신의 레이아웃을 파악해야합니다.레이아웃을 정확하게 제어 할 필요가 없다면, Topher의 솔루션으로 가십시오. ListView가 레이아웃 부분을 대신합니다.

출처

2013-07-09 17:11:51 Dave

sproutcore에서 버튼을 클릭하면 텍스트 필드를 추가합니다

답변

관련 문제