访问自定义组件数据/方法

我有一个使用自定义组件的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

访问自定义组件数据/方法

回答

相关问题