नॉकआउट जेएस के साथ अजाक्स प्रश्न

मैं नॉकआउट जेएस का उपयोग कर तालिका में वस्तुओं की एक सूची प्रदर्शित करने का प्रयास करता हूं। यह एक विशिष्ट खोज इंटरफ़ेस की तरह है, जहां उपयोगकर्ता एक क्वेरी टाइप करता है और इंटरफ़ेस खोज इंजन द्वारा लौटाए गए परिणामों की सूची प्रदर्शित करता है। मैं उन्हें पहले AJAX कॉल के माध्यम से सर्वर से पुनर्प्राप्त करता हूं और फिर उन्हें बाध्य करने का प्रयास करता हूं। यह पहली क्वेरी के लिए बहुत अच्छी तरह से काम करता है। लेकिन जब मैं दूसरी क्वेरी (और बाद के प्रश्न) का प्रयास करता हूं, तो प्रत्येक परिणाम आइटम को 10 बार (डुप्लीकेट) का प्रतिनिधित्व किया जाता है, फिर तीसरी क्वेरी के लिए प्रत्येक आइटम 30 गुना (और इसी तरह) के लिए प्रदर्शित होता है। नीचे दिया गया कोड है।

<body >

<input type="search" id="skynet-query" name="q" placeholder="scientific search" autofocus /> <input type="submit" id="skynet-submit" value="Ignite!" onclick="getAttachments(document.getElementById('skynet-query').value)" />

<input data-bind="attr:{value: papers().id }" type="checkbox" name="article-to-basket" />

</body>

स्क्रिप्ट भाग निम्नलिखित है

<script>

 var array = new Array();

function getAttachments(keyword) {

  var request = $.ajax({
    type: "GET",
    datatype: "json",
    url: "get-papers?q="+keyword+"&format=json&full-articles=true&kw-count=10&article-count=10&task-type=m1"
  });

  request.done(function (response) {

    for (i=0;i

क्या कोई मुझे इस कोड के साथ क्या गलत है खोजने में मदद कर सकता है?

यही मेरा डेटा-मॉडल जैसा दिखता है

 {
    articles: [
    {
    "is-saved": false,
    title: "title",
    abstract: "Abstract",
    date: "2005-01-01 00:00:00",
    "publication-forum": "forum",
    "publication-forum-type": "article",
    authors: "Authors",
    keywords: "keyword1, keyword2, keywordn",
    id: "4f5a318e573ce53e03000015"
    }
    ]

    }
0
जोड़ा संपादित
विचारों: 1
असल में तीसरी बार प्रत्येक आइटम 45 बार प्रदर्शित किया गया था :( बहुत अजीब और मैं समझ नहीं पा रहा हूं क्यों
जोड़ा लेखक Paba, स्रोत
सीटें सरणी से आती हैं। समारोह आरक्षण ViewModel() {// var self = this; self.seats = ko.observableArray (सरणी); }
जोड़ा लेखक Paba, स्रोत
सीटें कहां से आती है? आपका दृश्य मॉडल अधूरा प्रतीत होता है।
जोड़ा लेखक Tomalak, स्रोत
आपका array "वैश्विक" है और आप हमेशा आइटम जोड़ रहे हैं और आप इसे कभी भी साफ़ नहीं करते ...
जोड़ा लेखक nemesv, स्रोत

1 उत्तर

नॉकआउट के लिए आपका दृष्टिकोण बिल्कुल सही नहीं है।

  • स्क्रीन पर प्रदर्शित होने वाले प्रत्येक मान को एक दृश्यमान माना जाना चाहिए जो आपके दृश्य मॉडल में बंधे हैं।
  • उदाहरण के लिए, नाम वाले इनपुट तत्व अनावश्यक हैं - value बाध्यकारी दृश्य मॉडल को अपडेट करने का ख्याल रखता है। आपको नाम से <input> को कभी भी संबोधित नहीं करना होगा।
  • कभी onclick जैसे इनलाइन ईवेंट हैंडलर का उपयोग न करें। नॉकआउट में नहीं और कहीं और नहीं।
  • वैश्विक चर का उपयोग न करें। आपकी समस्या वैश्विक array चर के उपयोग से आती है जो वास्तव में आपके दृश्य मॉडल पर एक अवलोकन योग्य सरणी होनी चाहिए।
  • सबकुछ साफ़ न करें और अपने पूरे दृश्य मॉडल को स्क्रैच से पुनर्स्थापित करें क्योंकि कुछ बदल गया है। नॉकआउट किसी आंशिक अपडेट को संभालेगा।

यहां एक बेहतर दृष्टिकोण है।


<input type="search" data-bind="value: query" placeholder="scientific search" autofocus /> <input type="submit" data-bind="click: getAttachments" />

<input data-bind="value: id, checked: selected" type="checkbox" />


तथा

function PaperData(data) {
    ko.utils.extend(this, data);
    this.selected = ko.observable(false);
}
PaperData.create = function (data) {
    return new PaperData(data);
};

function ReservationsViewModel() {
    var self = this;

    self.query = ko.observable();
    self.seats = ko.observableArray();

    self.queryParams = {
        "q": self.query,
        "format": "json",
        "full-articles": true,
        "kw-count": 10,
        "article-count": 10,
        "task-type": "m1"
    };

    self.getAttachments = function() {
        $.get("get-papers", ko.toJS(self.queryParams))
        .then(function (response) {
            return ko.utils.arrayMap(response.articles, PaperData.create);
        })
        .done(self.seats);
    };
}

ko.applyBindings(new ReservationsViewModel());

टिप्पणियाँ

  • आप फ्लाई पर अजाक्स प्रतिक्रिया डेटा को बदलने के लिए .then() का उपयोग कर सकते हैं।
  • आप परिवर्तित कोड को एक अवलोकन में लिखने के लिए .done() का उपयोग कर सकते हैं।
  • दृश्य कोड की एक अलग संपत्ति queryParams बनाना आपको "q" के साथ दिखाए गए जैसे अन्य क्वेरी पैरामीटर को गतिशील रूप से ट्विक करने की अनुमति देता है।
  • आप एक ऑब्जेक्ट से दूसरे ऑब्जेक्ट में गुणों को स्थानांतरित करने के लिए ko.utils.extend का उपयोग कर सकते हैं। वैकल्पिक रूप से आप मैपिंग प्लगइन का उपयोग कर सकते हैं।
1
जोड़ा
बहुत अच्छे जवाब के लिए धन्यवाद। मुझे एहसास हुआ कि मुझे अभी भी नॉकआउट अधिकार की अवधारणाओं को समझ में नहीं आया है। मैंने अपने कोड को अपने साथ बदलने की कोशिश की लेकिन मुझे निम्न त्रुटि मिली। अनचाहे संदर्भ त्रुटि: बाइंडिंग "मान: फ़ंक्शन() {वापसी आईडी}" संसाधित करने में असमर्थ "संदेश: आईडी परिभाषित नहीं है - ऐसा इसलिए हो सकता है क्योंकि मान आईडी में नहीं है डेटा इसलिए मैंने इसे इस के साथ बदल दिया। फिर यह त्रुटि चली गई लेकिन मुझे कोई परिणाम नहीं मिला
जोड़ा लेखक Paba, स्रोत
मैंने डाटामॉडल जोड़ा। मैंने कोई जावास्क्रिप्ट कोड नहीं जोड़ा है। त्रुटि <�इनपुट डेटा-बाइंड = "मान में आई: आईडी: चेक किया गया: चयनित" टाइप = "चेकबॉक्स" /> यह कहता है कि आईडी परिभाषित नहीं है। यह शीर्षक, लेखकों जैसे सभी अन्य चरों में आया था। जब मैंने कोशिश की। त्रुटि त्रुटि जाती है, लेकिन फिर भी मुझे डिस्प्ले पर कोई परिणाम नहीं मिलता है।
जोड़ा लेखक Paba, स्रोत
क्षमा करें, मैंने बंद कर दिया है]। इसे अब संकलित करना चाहिए। मुझे सर्वर से बदले में 10 लेख मिलेंगे।
जोड़ा लेखक Paba, स्रोत
टोमालक बहुत बहुत धन्यवाद। पहेली में आपका नमूना कोड मुझे बहुत मदद करता है। समस्या थी। डोन (self.seats); कुछ कैसे काम नहीं किया। तो मैंने इसे हटा दिया और जोड़ा .थ (फ़ंक्शन (प्रतिक्रिया) {self.seats (ko.utils.arrayMap (प्रतिक्रिया.आर्टिकल, पेपरडाटा.क्रेट));}) और फिर यह काम किया। मेरा दिन बचाने के लिए धन्यवाद।
जोड़ा लेखक Paba, स्रोत
अपनी बाध्यकारी घोषणाओं में किसी भी जावास्क्रिप्ट कोड का प्रयोग न करें। "मान जैसी चीज़ें: फ़ंक्शन() {वापसी आईडी}" कभी नहीं होना चाहिए। दृश्य गणना में सभी गणनाएं होनी चाहिए, बाइंडिंग में केवल संपत्ति के नाम होना चाहिए। डिबगिंग उद्देश्यों के लिए, समस्याग्रस्त टेम्पलेट अनुभागों में
 
जोड़ने का प्रयास करें। इस तरह आप वास्तविक वस्तु का निरीक्षण कर सकते हैं नॉकआउट किसी भी संदर्भ में काम करने की कोशिश करता है।
जोड़ा लेखक Tomalak, स्रोत
बेशक मुझे आपके डेटा मॉडल के बारे में कुछ अनुमान लगाना पड़ा, क्योंकि आपने कोई JSON नहीं दिखाया था। मुझे यकीन है कि अगर आप कोड के माध्यम से कदम उठाते हैं तो आप यह पता लगाने में सक्षम होंगे कि आपके विशेष मामले में चीजें कैसा दिखना चाहिए।
जोड़ा लेखक Tomalak, स्रोत
क्षमा करें, लेकिन जो आपने जोड़ा है वह संकलित भी नहीं करता है।
जोड़ा लेखक Tomalak, स्रोत
नहीं, यह नहीं है। यह न तो वाक्य रचनात्मक रूप से मान्य JSON है और न ही वाक्य रचनात्मक रूप से मान्य जावास्क्रिप्ट है। यह सही ढंग से इंडेंट नहीं किया गया है और url भी गायब है। यदि आप कामकाजी परिणाम देना चाहते हैं तो कृपया अपने कोड से अधिक गहन रहें।
जोड़ा लेखक Tomalak, स्रोत
एक बार ये त्रुटियां ठीक हो जाने पर मेरा कोड अपरिवर्तित हो जाता है। jsfiddle.net/fLca2 (अगली बार जब आप बेवकूफ़ बनाते हैं, तो यह वैसे भी आपका कर्तव्य होता।)
जोड़ा लेखक Tomalak, स्रोत