नॉकआउट 3.2 घटक डेटा संदर्भ

Question

मैं नॉकआउट 3.2 और नई घटक प्रणाली का उपयोग कर रहा हूं। मैं उन घटकों को रखने की कोशिश कर रहा हूं जिनमें उप-घटक शामिल हैं।

Home Page (component - with HomePageViewModel) NewsFeed1 (component with HomePageViewModel.NewsFeedViewModel1) NewsFeed2 (component with HomePageViewModel.NewsFeedViewModel2)

HomePageViewModel

var viewModel = (function() { 
    function viewModel() { 
     this.message = ko.observable("Welcome to DKT!"); 
     this.newsFeedViewModel = new gr.viewModel(); 
     this.newsFeedViewModel2 = new gr.viewModel(); 
     this.newsFeedViewModel.message("Message 1"); 
     this.newsFeedViewModel2.message("Message 2"); 
    } 
    return viewModel; 
})(); 

NewsFeedViewModel

var viewModel = (function() { 
    function viewModel() { 
     this.message = ko.observable("This is the profile!"); 
    } 
    return viewModel; 
})(); 

आप देख सकते हैं HomePageViewModel दोनों NewsFeedViewModel शामिल हैं। अब मैं इन दो घटकों के डेटाकॉन्टेक्स्ट/बाइंडिंग कॉन्टेक्स्ट के रूप में इन्हें उपयोग करने में सक्षम होना चाहता हूं लेकिन यह काम नहीं कर रहा है।

home.html

<news-feed data-bind="newsFeedViewModel"></news-feed> 
<news-feed data-bind="newsFeedViewModel2"></news-feed> 

इन दोनों घटकों HomePageViewModel से ViewModels का उपयोग नहीं करते लेकिन एक नए NewsFeedViewModel उपयोग करता है। मैं इन घटकों के डेटाकॉन्टेक्स्ट को दृश्य घटक से कैसे जोड़ सकता हूं शीर्ष मॉडल (घर) में संग्रहीत मॉडल?

Answer 1

आम तौर पर, आप params के माध्यम से किसी भी डेटा के साथ अपना घटक आपूर्ति करना चाहते हैं।

ko.components.register("news-feed", { 
    viewModel: function (params) { 
     this.vm = params.vm; 
    }, 

    template: "<h2>News Feed</h2><div data-bind=\"text: vm.message\"></div>" 
}); 

उसके बाद, आप जैसे तत्वों को परिभाषित करेगा: उदाहरण के लिए, अपने संरचना के साथ, आप की तरह घटक बना सकते हैं

<news-feed params="vm: newsFeedViewModel"></news-feed> 

<news-feed params="vm: newsFeedViewModel2"></news-feed> 

आप प्रत्येक के लिए सीधे में message पारित करने के लिए चुन सकते हैं और/या अपने पैरा के लिए जो भी नाम समझते हैं उसे चुनें (vm के बजाय)।

नमूना: http://jsfiddle.net/rniemeyer/fssXE/