[knockoutjs] data-bind text에서 문자열을 추가하는 방법

knockoutjs에서 태그 안에 data-bind="text:변수"를 view model에 있는 값을 불러오도록 하는데 저렇게 하면 태그 안의 값이 치환되는 형태이다.

 

그렇다면 불러온값 외에 다른 string을 추가하는 것은 어떻게 하는 것인지에 알아보자.

 

직접 테스트한 샘플 코드는 아래와 같다.

    <h4>People</h4>
    <ul data-bind="foreach: people">
        <li>
            <span data-bind="text: $index() + ' with string'"></span><!--foreach의 $index에 문자열을 추가하는 방법-->
            <span data-bind="text: name + ' with string'"></span><!--people안에 있는 값에 문자열을 추가하는 방법-->
        </li>
    </ul>
    <div data-bind="text: 'outText : ' + outText() + ' with string'"></div><!--일반적인 단일 값일 경우 문자열을 추가하는 방법-->
    <script>
            
        const ViewModel = function(){
            this.people = ko.observableArray([
                {name:'test1'},
                {name:'test2'},
                {name:'test3'},
                {name:'test4'},
            ]);
            this.outText = ko.observable('test');
            this.removePerson = () => {
                this.people.remove(this)
            }
        }
        
        const viewModel = new ViewModel()
        
       ko.applyBindings(viewModel);
    </script>

 

foreach를 사용하였고 그 경우 index를 가져오는 방법, 그리고 view model에 있는 객체의 값을 가져오는 방법, 객체 안에 다시 객체로 되어져 있는 경우 값을 가져오는 방법으로 구성하였다.