Knockout.js: जटिल वस्तु

Question

मैं knockout.js के लिए नया हूँ करने के लिए बाध्यकारी और निम्न वस्तु एक उपयोगकर्ता को दर्शाने के लिए बाध्य करने के लिए कोशिश कर रहा हूँ:

{ 
    "$id": "1", 
    "$values": [ 
     { 
      "$id": "2", 
      "Locations": { 
       "$id": "3", 
       "$values": [] 
      }, 
      "Photos": { 
       "$id": "4", 
       "$values": [] 
      }, 
      "UserId": 1, 
      "Name": "Test User" 
     } 
    ] 
} 

एक उपयोगकर्ता शून्य या अधिक स्थानों सकता है, और शून्य या और अधिक तस्वीरें।

दृश्य मॉडल:

function UsersViewModel() { 
    var self = this; 
    self.users = ko.observableArray(); 

    var baseUri = 'http://localhost:46241/api/users'; 

    $.getJSON(baseUri, function (data) { 
     self.users = data; 
    }); 
} 

$(document).ready(function() { 
    ko.applyBindings(new UsersViewModel()); 
}) 

एचटीएमएल शामिल बाध्यकारी निम्नलिखित:

<ul id="update-users" data-bind="foreach: users"> 
    <li> 
      <div><div class="item">User ID</div> 
       <input type="text" data-bind="value: $data.UserId" /> 
      </div>     
      <div><div class="item">Name</div> 
       <input type="text" data-bind="value: $data.Name" /> 
      </div>     
    </li> 
</ul> 

मैं बाहर फ्लैट इस गलत तरीके से कर रहा हूँ? या उपयोगकर्ता के ऑब्जेक्ट संदर्भ स्थान और फ़ोटो के संदर्भ में संभवतः बाध्यकारी को गड़बड़ कर रहे हैं?

Answer 1

क्या मैं इसे गलत तरीके से कर रहा हूं?

हां। तुम्हें पता है, JSON कॉलबैक में अपने observableArray अधिलेखित कर रहे हैं इस प्रकार इसे नष्ट:

$.getJSON(baseUri, function (data) { 
    self.users(data.$values); 
}); 

ध्यान रखें कि आपके मामले में, data.$values शामिल करने के लिए लगता है:

$.getJSON(baseUri, function (data) { 
    self.users = data; 
}); 

सामान्य तौर पर, नॉकआउट observables यह पसंद करने के लिए आवंटित कर रहे हैं वास्तविक सरणी, data स्वयं नहीं।

यह आपके मामले के लिए काम करेगा, लेकिन यह अपनी पूरी क्षमता के लिए नॉकआउट का उपयोग नहीं कर रहा है।

mapping plugin इस मामले के लिए बनाया गया है। यह पुनरावर्ती रूप से एक जटिल वस्तु को पार करता है और इसकी सभी गुणों को अवलोकन में बदल देता है और सभी निहित सरणी अवलोकन करने योग्य सरणी में बदल जाता है। इससे आपको ऑब्जेक्ट की स्थिति पर बढ़िया नियंत्रण मिल जाता है, जिससे आप हर बदलाव की निगरानी कर सकते हैं।

$.getJSON(baseUri, function (data) { 
    ko.mapping.fromJS(data.$values, {}, self.users); 
}); 

वह आंशिक अपडेट की अनुमति देता है: मान लीजिए आप सर्वर से उपयोगकर्ताओं की सूची प्राप्त करने और अपने दृश्य मॉडल पहले से ही उनमें से आधे है। मैपिंग प्लगइन केवल उन लोगों को जोड़ने में सक्षम है जो आपके व्यू मॉडल में अनुपलब्ध हैं और मौजूदा में उचित परिवर्तन कर रहे हैं। यदि आप जानना चाहते हैं तो दस्तावेज़ों में "Advanced usage" section पढ़ें।

---

आप मानचित्रण प्लगइन सर्वर से उपयोगकर्ता ऑब्जेक्ट की श्रृंखला हो और का उपयोग मान लिया जाये, तो अपने बाध्यकारी इस प्रकार दिखाई देगा:

<ul id="update-users" data-bind="foreach: users"> 
    <li> 
      <div><div class="item">User ID</div> 
       <input type="text" data-bind="value: UserId" /> 
      </div>     
      <div><div class="item">Name</div> 
       <input type="text" data-bind="value: Name" /> 
      </div> 
      <ul class="photos" data-bind="foreach: Photos.$values"> 
       <!-- ... --> 
      <ul> 
    </li> 
</ul> 

एक सामान्य टिप्पणी पर, @Greg स्मिथ की टिप्पणी सही है । ऑब्जेक्ट कुंजियों में $ खोने का प्रयास करें, वे किसी बिंदु पर नॉकआउट में विशेष चर के साथ संघर्ष कर सकते हैं। उदाहरण के लिए, आप उन्हें अंडरस्कोर से सुरक्षित रूप से प्रतिस्थापित कर सकते हैं।

एक अधिक सामान्य टिप्पणी पर, मैं आपके JSON में पूरे $id/$values धारणा को निकाल देते हैं करने की कोशिश करता हूँ अगर मैं तुम्हें थे, यह किसी भी उद्देश्य पूरा नहीं लगता है:

[ 
    { 
     "Locations": [], 
     "Photos": [], 
     "UserId": 1, 
     "Name": "Test User" 
    } 
]