knockout.js에 조건부로 요소 속성 추가

knockout.js에 조건부로 요소 속성 추가

---

knockout.js 라이브러리에는 HTML 요소 속성 (예 : "제목")의 값을 동적으로 변경할 수 있는 "attr"데이터 바인딩 이 있습니다. 그러나 경우에 따라 바인딩 된 개체의 해당 관찰 가능 항목에 따라 속성이 필요하거나 필요하지 않을 수 있습니다. 예를 들어, 내 모델에 관찰 가능한 "title"이있는 경우 "title"속성이있는 경우 (null이 아님) 설정하거나 속성이없는 경우 (null) 완전히 건너 뛰고 싶을 수 있습니다.

녹아웃은 조건부로 속성을 설정하는 방법을 제공합니까? (이상적으로 전체 요소 여는 태그를 조건부로 렌더링하지 않고 ...)

[참고] 비슷한 이름의이 질문은 실제로 knockout의 CSS 클래스 처리에 의해 해결되었으며이 질문 (또는 자체 제목)과는 관련이 없습니다. knockoutjs를 사용하여 CSS 클래스를 조건부로 렌더링하는 방법

---

(내장 녹아웃 대신 수동으로 생성하는)을 선택할 때 필요했습니다.

<option 
 data-bind="text: text, 
    attr:{
     value:value,
     'selected': typeof(selected) !== 'undefined' ? selected : null 
     }">
 Choice X
</option>

이것은 항상 'text'속성을 업데이트하고 'value'속성을 추가하지만 데이터에 이미 'selected'값이 정의되어있는 경우에만 'selected'를 추가하라는 의미입니다.

---

속성을 추가하거나 추가하지 않기 전에 특정 관찰 가능한 부울 값을 확인 하는 사용자 지정 바인딩 attrIf 를 만들 수 있습니다 . 이 예를 참조하십시오.

ko.bindingHandlers.attrIf = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var h = ko.utils.unwrapObservable(valueAccessor());
        var show = ko.utils.unwrapObservable(h._if);
        if (show) {
            ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor);
        } else {
            for (var k in h) {
                if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) {
                    $(element).removeAttr(k);
                }
            }
        }
    }
};

<a href="#" data-bind="attrIf: {title: title, _if: flag}">link</a>

---

Knockout의 "attr"데이터 바인딩은이 시나리오를 지원하지 않고 단지 null을 반환하거나 getDisabledState () 함수에서 정의되지 않은 경우 속성을 방출하지 않습니다.

이 답변은 'readonly'및 'disabled'와 같은 속성을 사용 하여 Knockout 속성 바인딩 에서 검색 되었습니다.

---

@gbs에 답장을했을 수 있었으면했지만 할 수 없습니다. 내 솔루션은 동일한 HTML 요소 중 하나, 속성이있는 요소,없는 요소 및 요소에 따라 요소 중 하나를 추가하는 녹아웃 조건을 갖는 것입니다. 이 맞춤 입찰에 대해서도 알고 있지만 어떤 솔루션이 더 효율적입니까?

참조 URL : https://stackoverflow.com/questions/12963023/conditionally-add-an-element-attribute-in-knockout-js