訪問自定義組件數據/方法

我有一個使用自定義組件的html文件。自定義組件伸出並獲取bind（）方法的數據。所以，當組件被綁定時，它會獲取數據並相應地設置屬性。這個組件還有一個Save（）方法，在調用時應該將該對象提交給數據庫。訪問自定義組件數據/方法

現在，在我的外部html文件中，我已經導入了這個自定義組件。所以，我有自定義組件，然後我有一個提交按鈕（未自定義組件的一部分）是這樣的：

<custom-component></custom-component> 
<button click.trigger="submitCustomComponentData()"></button>

我之所以沒有在自定義組件視圖中的按鈕是因爲視圖並不總是會有相同的按鈕，這使得組件不可擴展。

submitCustomComponentData()方法基本上調用了我的組件虛擬機中的更新方法。

現在，當頁面加載時，一切都運行完美。數據被吸入，我的所有輸入都被預先填充了以前的數據（來自數據庫）。一切都很好。但是，當我調用submitCustomComponentData()方法（或單擊按鈕）時，由於未填充對象而出現錯誤。這就像我失去了實例或其他東西。

下面是一些重要的部分片段：

這是我的外HTML文件的樣子。它由自定義組件組成。

<template> 
    <require from="resources/components/dispatch-questions/dispatch-questions"></require> 

<section class="pages au-animate"> 
    <div class="row" id="dispatch-questions"> 
     <dispatch-questions></dispatch-questions> 
    </div> 
</section> 

</template>

和VM此獲取與分發，問題部分注入，像這樣：

constructor(private router: Router, private dq: DispatchQuestions) { 
    }

它也有應該叫updatedb的方法，那就是在部件的click.trigger方法。在那一刻，組件（它應該已經具有在bind（）上創建的相同實例）應該將該對象提交給DB。

但是我收到一個錯誤，因爲某些原因，對象是空的。組件中的功能是抓取this.myObject並將其提交給數據庫。我想當我從外部VM（不是組件虛擬機）調用更新功能時，我正在丟失組件的this實例。我認爲這是問題..不確定如何解決它，如果這是問題。任何幫助都是極好的！

我試圖在Gist上創建一個簡單的版本。 https://gist.run/?id=f07b2eaae9bec27acda296189585ea6c

來源

2016-09-23 James

有關於in the documentation的解釋。

的一般規律爲Aurelia路上的DI使用

一切除了那些被列爲通過創建「組件」，基本上是自定義元素，自定義屬性和視圖模型的東西的應用級單路由器或組合引擎。您可以通過顯式配置更改路由器和組合創建組件的生命週期。

我建議使用EventAggregator而不是注入。這種方法確保了靈活性，可擴展性並防止緊密耦合。

關於EventAggregator：#1 Walkthrough by Dwayne Charrington,Documentation,Contact Manager Tutorial。

這裏有一個要點與您的方案進行論證：https://gist.run/?id=f66eaa12e4183a72a7a3cc01ce3a8fb5

app.js

讓我們假設我們想使用Component自定義組件的多個實例。爲了達到這個目標，我們可以發佈一個帶有相關數據的事件component:save。

import { inject } from "aurelia-framework"; 
import { EventAggregator } from 'aurelia-event-aggregator'; 

@inject(EventAggregator) 
export class App { 

    components = [ 
    { id: 1, name: 'Component #' }, 
    { id: 2, name: 'Component #' }, 
    { id: 3, name: 'Component #' } 
    ]; 

    constructor(eventAggregator) { 
    this.eventAggregator = eventAggregator; 
    } 

    SubmitData(opts) { 
    this.eventAggregator.publish('component:save', opts); 
    } 

    // ... 
}

component.js

在這裏，我們可以訂閱component:save事件，並檢查是否我們應該節約繼續。出於這個原因，每個Component實例應該有一個唯一的標識（數字，散列，uid等）。

注意：detached方法中有一個重要的清理部分，這在官方文檔中沒有明確提及。這就是爲什麼我列出了Dwayne Charrington的博客文章。

import { inject, bindable } from 'aurelia-framework'; 
import { EventAggregator } from 'aurelia-event-aggregator'; 

@inject(EventAggregator) 
export class Component { 

    @bindable 
    id; 

    object = {}; 

    constructor(eventAggregator) { 
    this.eventAggregator = eventAggregator; 
    } 

    bind() { 
    this.object = { 
     "Name": `My name ${this.id}`, 
     "Age": 21 
    }; 

    console.log(`component ADDED: #${this.id}`); 

    this.subscriber = this.eventAggregator.subscribe('component:save', data => { 

     if (data.id === this.id || data.all === true) { 
     this.SubmitObjectToDatabase(); 
     console.log(`component:save SAVED: #${this.id}`, this.object.Name); 
     } else { 
     console.log(`component:save PASSED: #${this.id}`); 
     } 

    }); 
    } 

    SubmitObjectToDatabase() { 
    console.log(`SubmitObjectToDatabase has been called: #${this.id}`); 
    } 

    detached() { 
    // cleanup 
    this.subscriber.dispose(); 
    console.log(`component REMOVED: #${this.id}`); 
    } 
}

來源

2016-09-24 07:59:50

訪問自定義組件數據/方法

回答

相關問題