하나의 요소에 여러 데이터 바인딩 속성을 갖는 방법은 무엇입니까?

94

한 요소에 여러 데이터 바인딩이 필요합니다. 예를 들어, 내가 원하는 href뿐만 아니라 html데이터 바인딩에 하나 개의 a 태그입니다. 나는 이것을 시도했다,

<a data-bind="html: name" 
   data-bind="attr: { href: url }" 
   data-bind="attr: { 'data-prop': xyz }">
</a>

그러나 이것은 작동하지 않습니다. 녹아웃은 하나의 data-bind 속성 바인딩 만 지원하는 것 같습니다 . 하나의 요소 href에서, 내부 html및 사용자 정의 " data-prop"속성을 모두 바인딩하는 방법은 무엇입니까?

javascript jquery knockout.js

— 사용자 960567
소스

127

이렇게 :

<a data-bind="html: name, attr: { href: url }">

쉼표로 구분 된 바인딩을 사용합니다. 속성은 객체 전달과 동일합니다.

{
    html: name, 
    attr: { href: url }
}

또는 attr한 번 에 여러 바인딩에 대해 묻는 경우 :

<a data-bind="html: name, attr: { href: url, 'data-prop': FullName }">

— 폴 슬레이터 19
소스

또한 viewModel.tasks = ko.observableArray (tsks)이면 viewModel.tasks = [new Array]를 변경하면 배열이 변경되었음을 노크하는 방법

— user960567

ko.observable 값을 설정할 때 다음과 같이 시도하십시오 viewModel.tasks([1,2,3]);.. 즉, 새 값을 매개 변수로 전달하는 함수로 호출합니다

— paulslater19

2

이것이 내가 데이터 바인딩을 사용하여 소스 속성과 클릭 이벤트를 구현 한 방법입니다. 유용 할 수 있습니다.

<img data-bind="{click: function(data, event) {ESVendorWidget.loadFunction(data,event)},
                 attr: {src: $data.Photo.PhotoUrl }}"
     alt="package pic" class="big" />

— 아미르 사자 드
소스

1

나는 단순히 다음을 사용합니다.

<input type="checkbox"
    data-bind="click: callFunction(), checkedValue: 0, checked: Card.Days">

체크 박스 요소의 경우.

— 크리스
소스

1

, 아래와 같이 여러 속성을 사용할 수 있습니다.

<a data-bind="attr: { href: url, id: id , class: classvalue}">

이런 물건

{ url: 'http://stackoverflow.com', id:'newid' , classvalue: 'classname' }

— 수 렌드 라 쿠마르 아히 르
소스