데이터 - 윈 ​​- 바인드 문제 : 변환기는 한 번만 실행되며 요소의 ID를 바인드 할 수 없습니다.

Question

ID 및 상태를 포함하는 개체에 바인딩 된 다음 html이 있습니다. 상태 값을 특정 색상으로 변환하려고합니다 (따라서 변환기 함수 convertStatus). 첫 번째 바인딩에서 변환기 작업을 볼 수 있지만 바인딩 목록에서 상태를 변경하면 UI 업데이트가 표시되지 않고 이후에 호출되는 convertStatus가 표시되지 않습니다. 내 다른 문제는 (... 아마도 바인딩을 통해이 값을 설정할 수 없습니다) 예상대로 작동하지 않는 첫 번째 스팬의 id 속성을 결합하려고

HTML :

<span data-win-bind="id: id">person</span> 
<span data-win-bind="textContent: status converter.convertStatus"></span> 

자바 스크립트 (필자는 상태 값을 수정하여 시도) : WinJS.Binding.List를

// 사람 ===
updateStatus 시스템에 변화 상태의 결과로 호출되는 함수입니다 //

function updateStatus(data) { 
    persons.forEach(function(value, index, array) { 
     if(value.id === data.id) { 
      value.status = data.status; 
      persons.notifyMutated(index); 
     } 
    }, this); 
} 

변환기를 사용하지 않는 값에 notifyMutated (index) work를 보았습니다.

GitHub의 프로젝트

Public repo for sample (not-working)으로 업데이트 -이 기본 데이터 세트 및 항목을 클릭하면 실행되는 기능을 가진 목록보기가 정말 기본 응용 프로그램입니다. 이 함수는 항목의 바운드 필드 중 하나를 임의 화하고 목록에서 notifyMutated (...)를 호출하여 시각적 업데이트를 트리거하려고 시도합니다. WinJS.Binding.List ({binding : true})를 정의하는 경우에도 마찬가지입니다. notifyReload()를 통해 강제로 업데이트하지 않으면 업데이트가 표시되지 않습니다. listview 요소에서 다시로드 깜박임이 발생합니다.

Answer 1

은이 질문에 대답하려면 :

1) 왜 바인딩을 통해 ID를 설정할 수 없습니다?

이것은 의도적으로 방지됩니다. WinJS 바인딩 시스템은 바인딩하는 요소를 추적하기 위해 ID를 사용합니다 (매달린 바인딩을 통해 DOM 요소가 누출되지 않도록). 따라서 바인딩 된 템플릿의 ID를 제어 할 수 있어야합니다.

2) 변환기가 두 번 이상 작동하지 않는 이유는 무엇입니까?

Binding.List는 목록 내용 (추가, 제거 또는 이동 한 항목)의 변경 내용을 listview에 알려주지 만 목록보기에 내용 변경 내용을 알리는 것은 개별 항목의 책임입니다.

바인딩 할 수있는 데이터 개체가 있어야합니다. 몇 가지 옵션이 있습니다 : 당신이 Binding.List

후자에 바인딩 모드에 수집

전원을 켜고에 추가로 요소

• 전화 WinJS.Binding.as 아마 쉽습니다. 목록 목록의 모든에 binding.as를 호출 그 방법

  var list = new WinJS.Binding.List({binding: true}); 
  

  을, 사물이 업데이트를 시작합니다 : 기본적으로, 당신은 당신의 Binding.List를 만들 때, 이렇게.

  나는 다음을 수행하는 경우, 내가 후 바인딩 UI 업데이트를 볼 것으로 나타났습니다

Answer 2

:

나중에 응용 프로그램의

var list = new WinJS.Binding.List({binding: true}); 
var item = WinJS.Binding.as({ 
    firstName: "Billy", 
    lastName: "Bob" 
}); 
list.push(item); 

, 당신과 같이 일부 값을 변경할 수 있습니다

item.firstName = "Bobby"; 
item.lastName = "Joe"; 

MSDN - WinJS.Binding.as

:

... 그리고 당신은 UI 여기

의 변화를 볼 수 있습니다 자세한 내용은 MSDN의 링크입니다

Answer 3

id 값 설정에 관해서. < 버튼>에 대해 name 속성의 값을 설정할 수 있음을 발견했습니다. ID를 설정하려고했지만 작동하지 않습니다. HTH

Answer 4

optimizeBindingReferences 속성

바인딩 자동 요소의 ID를 설정할지 여부를 결정. JavaScript (WinJS) 바인딩 용 Windows 라이브러리를 사용하는 응용 프로그램에서이 속성을 true로 설정해야합니다.

WinJS.Binding.optimizeBindingReferences = true; 

소스 : http://msdn.microsoft.com/en-us/library/windows/apps/jj215606.aspx이

가 그것은 "바인딩 : true"로 사용하는 WinJS.Binding.List의 구성을 변경 내 현재 응용 프로그램 내에서 표시되지 않습니다