KnockoutJs - 관찰 가능한 바인딩 및 범위

Question

여기서 두 샘플은 다음
샘플 1 : http://jsfiddle.net/TheMetalDog/yYAFJ/9/
예제 2 예제 1에서 http://jsfiddle.net/TheMetalDog/yYAFJ/11/

, 관찰이 뷰 모델의 외측에 있고, 선택 목록으로부터 선택된 타이틀 항목을 추가 할 때 템플리트 항목에 개별적으로 첨부됩니다.

샘플 2에서

var selectedTitle = ko.observable(); 

, 관찰은 뷰 모델의 내부와 관찰에 바인드 된 모든 항목을 동기화하고 항목을 추가로 함께 업데이트됩니다.

viewModel.selectedTitle = ko.observable(); 

모듈 환경 내에서 작업 할 때 Sample 1 동작을 얻으려면 권장 전략이 있습니까? 특히 requirejs?

Answer 1

관측 대상에 대한 넉 아웃 2.2의 새로운 peek 기능이이 시나리오를 처리합니다. 여기에 업데이트 된 jsFiddle가있다 : http://jsfiddle.net/TheMetalDog/fD5kF/

의 차이는 여기 .peek()를 추가 : <span data-bind="text: $root.selectedTitle.peek()"></span>

Answer 2

코드가 무엇을하려하는지 명확하지 않습니다. 두 개의 서로 다른 뷰 모델이 있고 서로 상호 작용하기를 원하는 것처럼 보입니다. 이 경우 postbox을 사용하려고합니다. 뷰 모델을 별도로 유지하면서도 서로 통신 할 수있게 해줍니다.

그래서 선택한 제목을 사용하여보기 모델에서 새 항목이나 하위 항목을 만들 때 사용하고 싶습니다.

그냥 방해가되지 않도록하려면 title 속성을 항목에 추가해야합니다. 관측 가능 범위가 title 인 다른 개체에 항목을 매핑하십시오.

function Item(data) { 
    var self = this; 
    self.title = ko.observable(data.title); // add a 'title' property to all items 
    self.name = ko.observable(data.name); 

    // map any existing child items to new Items 
    self.childItems = ko.observableArray(ko.utils.arrayMap(data.childitems, function (item) { 
     return new Item(item); 
    })); 
} 

내가 가장 쉬운 방법은 "추가"와 "하는 AddChild"항목을 작성하고 뷰 모델이 가입해야하는 것입니다 생각합니다. 해당 주제에 대한 업데이트를 받으면 해당 제목을 사용하여 새 항목을 추가 할 수 있습니다. 그런 다음 외부 소스에서 사용하고자하는 제목을 적절한 주제로 게시하십시오.

I updated your fiddle

// add a new item using the selected title 
ko.postbox.publish('add', selectedTitle()); 

// add a new child item using the selected title 
ko.postbox.publish('addChild', selectedTitle()); 

function ViewModel(data) { 
    var self = this; 

    // ... 

    var i = 5; 
    function newItem(title) { 
     return new Item({ 
      title: title, 
      name: i++, 
      childItems: [] 
     }); 
    } 
    ko.postbox.subscribe('add', function (title) { 
     // a title was received for the `add` topic, add it 
     self.items.push(newItem(title)); 
    }); 
    ko.postbox.subscribe('addChild', function (title) { 
     // a title was received for the `addChild` topic, add it 
     var firstItem = self.items()[0]; 
     if (firstItem) { 
      firstItem.childItems.push(newItem(title)); 
     } 
    }); 
} 

는 아마 일을해야하는지 설명합니다.