टाइपप्रति गलत संदर्भ इस

Question

कोड:

export class ViewModel { 
     public users: knockout.koObservableArrayBase; 

     constructor() { 
      this.users = ko.observableArray([]); 
      this.removeUser = this.removeUser.bind(this);//<-- Here compiller shows error 
     } 

     removeUser(user: User): void { 
      this.users.remove(user); 
     } 
} 

---

एचटीएमएल:

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Surname</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: users"> 
     <tr> 
      <td><a href="#" data-bind="click: $root.removeUser">Remove</a></td> 
      <td data-bind="text: name"></td> 
      <td data-bind="text: surname"></td> 
     </tr> 
    </tbody> 
</table> 

---

समस्या removeUser विधि में है। डिफ़ॉल्ट रूप से, यदि मैं संदर्भ को बाध्य नहीं करता हूं, तो यह == UserToDelete - मॉड्यूल ऑब्जेक्ट नहीं देखता है। यदि मैं कन्स्ट्रक्टर में जोड़ रहा हूं: this.removeUser = this.removeUser.bind(this); (manually enforce context), तो संदर्भ इस == व्यूमोडेल की आवश्यकता है, लेकिन फिर टाइपस्क्रिप्ट शिकायत करता है कि "फ़ंक्शन को कन्वर्ट नहीं कर सकता (उपयोगकर्ता: उपयोगकर्ता) => शून्य को कॉल हस्ताक्षर की आवश्यकता है, लेकिन फ़ंक्शन में एक की कमी है।"

Answer 1

मैं इसलिए से परिचित नहीं हूं इसलिए संदर्भ स्विचिंग को हल करने का एक बेहतर तरीका है, लेकिन आपकी टाइपस्क्रिप्ट कंपाइलर त्रुटि 'बाइंड' रिटर्निंग प्रकार 'फंक्शन' के कारण होती है जो 'removeUser' के प्रकार के साथ असंगत है। । इस प्रकार आप मूल प्रकार हस्ताक्षर में लौटे समारोह कास्टिंग द्वारा इस हल करने के लिए सक्षम होना चाहिए:

this.removeUser = <(user: User) => void> this.removeUser.bind(this); 

Answer 2

खैर मैं एक ही समस्या thats क्यों मैं अपने मुद्दे को ठीक करने के लिए निम्न आधार वर्ग के साथ आया था

export class ViewModelBase { 
    private prefix: string = 'On'; 

    public Initialize() { 
     for (var methodName in this) { 
      var fn = this[methodName]; 
      var newMethodName = methodName.substr(this.prefix.length); 
      if (typeof fn === 'function' && methodName.indexOf(this.prefix) == 0 && this[newMethodName] == undefined) { 
       this[newMethodName] = $.proxy(fn, this); 
      } 
     } 
    } 
} 

यह आपके वर्ग के सभी सदस्यों को लूप करता है और यदि कोई विधि चालू होती है तो यह बिना किसी नई विधि को बनाएगी जो मूल विधि को सही संदर्भ के साथ कॉल करेगी।

नहीं $.proxy एक jquery कॉल है इसलिए काम करने के लिए jquery की आवश्यकता है।

Answer 3

खैर, सबसे सरल समाधान और मैं आमतौर पर टाइपस्क्रिप्ट और नॉकआउट जेएस के साथ क्या करता हूं यह है कि मैं प्रोटोटाइप पर नॉकआउट से नहीं बल्कि कन्स्ट्रक्टर पर फ़ंक्शन घोषित नहीं करता हूं। तो, मैं इसे इस तरह बना दूंगा:

export class ViewModel { 
     public users: knockout.koObservableArrayBase; 
     removeUser:(user: User) => void; 

     constructor() { 
      this.users = ko.observableArray([]); 
      this.removeUser = (user:User) => { 
       this.users.remove(user); 
      } 
     } 
} 

Answer 4

मैं एक ही समस्या में भाग गया। सही संदर्भ प्राप्त करने के लिए आप क्लिकबाइंडिंग द्वारा पारित पैरामीटर का उपयोग कर सकते हैं। क्लिकबाइंडिंग 2 पैरामीटर पास करता है, यानी उपयोगकर्ता और क्लिक की jquery घटना।

यदि आप jquery ईवेंट लेते हैं, और ko.contextFor() फ़ंक्शन का उपयोग करने के बजाय, आप सही संदर्भ प्राप्त कर सकते हैं। data-bind="click: $root.MyFunc.bind($root)":

removeUser(user: User, clickEvent: any): void { 
    var self = ko.contextFor(clickEvent.srcElement).$root; 
    self.users.remove(user); 
} 

Answer 5

एक वैकल्पिक क्लिक जावास्क्रिप्ट का bind समारोह का उपयोग करने के अपने दृष्टिकोण को मॉडल के लिए this का मूल्य मजबूर करने के लिए बाध्यकारी बदलने के लिए है:

आपका समारोह कुछ ऐसा दिखाई देगा।

ध्यान दें कि $data और क्लिक event वस्तु अभी भी में तर्कों के रूप MyFunc को नॉकआउट से के रूप में click binding विनिर्देश द्वारा वर्णित पारित हो जाएगा। यदि आपको MyFunc पर दिए गए तर्कों को ओवरराइड करने की आवश्यकता है, तो उन्हें $root के बाद बस बाइंड फ़ंक्शन में पास करें: .bind($root, param1, param2)। तकनीकी रूप से, इन तर्कों को को नॉकआउट द्वारा प्रदान किए जाने वाले तर्कों के लिए [param1, param2, data, event] तर्क देने के लिए तैयार किया जाएगा।